50fc7f2f01
* add tailwindcss * add header component with logo and add torrent buttons * remove bootstrap from few files replace it with tailwindcss classes, add card which diplay all nessesarry information about torrent and current state * Add modal component and reorganize components folder * add useModal hook to render modal though react portal, remove UrlPromptModal and replace it with useModal. * add taliwindcss to Desctop app * removed bootstrap from deleteTorrentModal replace it with useModal * replacing bootstrap with useModal * saving * Saving * Header and cards now look good * Modals still broken... * still doesnt work * Finally it scrolls * Continuing to fix bugs * Continuing to fix bugs * Aler * Getting better * Desktop doesnt work with tailwind somehow * Desktop now works with tailwind * Styles fully work * (De)select all buttons * fix alert styles * Animate progress bar * Progress bar + error colors * Fix error message * Torrent status icon (#56) * add statusIcon component to display icon of the torrent status * change props name and remove isDownloading variable * Tweak styles for icon * Tweak styles * Update styles --------- Co-authored-by: Artur Lozovski <arccik@gmail.com>
26 lines
996 B
TypeScript
26 lines
996 B
TypeScript
import { FileInput } from "./buttons/FileInput";
|
|
import { MagnetInput } from "./buttons/MagnetInput";
|
|
|
|
// @ts-ignore
|
|
import Logo from "../../assets/logo.svg?react";
|
|
|
|
export const Header = ({ title }: { title: string }) => {
|
|
const [name, version] = title.split("-");
|
|
return (
|
|
<header className="bg-slate-50 drop-shadow-lg flex flex-wrap justify-center lg:justify-between items-center 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">
|
|
<div className="text-3xl">{name}</div>
|
|
<div className="bg-blue-100 text-blue-800 text-xl font-semibold me-2 px-2.5 py-0.5 rounded ms-2">
|
|
{version}
|
|
</div>
|
|
</h1>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1 m-2">
|
|
<MagnetInput className="flex-grow justify-center" />
|
|
<FileInput className="flex-grow justify-center" />
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|