import { FileInput } from "./buttons/FileInput";
import { MagnetInput } from "./buttons/MagnetInput";
// @ts-ignore
import Logo from "../../assets/logo.svg?react";
export const Header = ({
title,
version,
}: {
title: string;
version: string;
}) => {
return (
<header className="bg-slate-50 drop-shadow-lg flex flex-wrap justify-center lg:justify-between items-center dark:bg-slate-800 mb-3">
<div className="flex flex-nowrap items-center justify-between m-2">
<Logo className="w-10 h-10 p-1" alt="logo" />
<h1 className="flex items-center dark:text-white">
<div className="text-3xl">{title}</div>
<div className="bg-blue-100 text-blue-800 text-xl font-semibold me-2 px-2.5 py-0.5 rounded ms-2 dark:bg-blue-900 dark:text-white">
v{version}
</div>
</h1>
</div>
<div className="flex flex-wrap gap-1 m-2">
<MagnetInput className="flex-grow justify-center dark:text-white" />
<FileInput className="flex-grow justify-center dark:text-white" />
</div>
</header>
);
};