Merge pull request #8 from Skrazzo/style/improvements
Style/improvements
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { LayoutTemplate, LetterText } from "lucide-react";
|
||||
import { LayoutTemplate, LetterText, PlusSquare } from "lucide-react";
|
||||
|
||||
const linkClass = { className: "flex items-center gap-2" };
|
||||
const iconProps = { size: 20 };
|
||||
@@ -10,7 +10,11 @@ export default function Header() {
|
||||
<nav className="flex items-center gap-4 font-bold ">
|
||||
<Link to="/" {...linkClass}>
|
||||
<LetterText {...iconProps} />
|
||||
Cover letters
|
||||
Covers
|
||||
</Link>
|
||||
<Link to="/cover/create" {...linkClass}>
|
||||
<PlusSquare {...iconProps} />
|
||||
Create letter
|
||||
</Link>
|
||||
<Link to="/templates" {...linkClass}>
|
||||
<LayoutTemplate {...iconProps} />
|
||||
|
||||
@@ -61,40 +61,44 @@ function RouteComponent() {
|
||||
|
||||
return (
|
||||
<Authorised>
|
||||
<div className="flex items-center gap-4 mb-8 md:justify-between">
|
||||
<h1 className="text-2xl font-semibold">{cover.data?.cover.name || "Loading..."}</h1>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="flex max-md:flex-col items-center gap-4 mb-8 md:justify-between">
|
||||
<h1 className="text-2xl max-md:text-center font-semibold">
|
||||
{cover.data?.cover.name || "Loading..."}
|
||||
</h1>
|
||||
|
||||
<div className="space-x-2">
|
||||
<Button
|
||||
className="hover:bg-danger hover:text-background"
|
||||
variant="ghost"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
<Link
|
||||
to={"/cover/edit/$coverId"}
|
||||
params={{ coverId: cover.data?.cover.id.toString() || "" }}
|
||||
>
|
||||
<Button variant="outline">
|
||||
<EditIcon />
|
||||
<div className="space-x-2">
|
||||
<Button
|
||||
className="hover:bg-danger hover:text-background"
|
||||
variant="ghost"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</Link>
|
||||
<Button onClick={handleDownload}>
|
||||
<DownloadIcon />
|
||||
</Button>
|
||||
<Link
|
||||
to={"/cover/edit/$coverId"}
|
||||
params={{ coverId: cover.data?.cover.id.toString() || "" }}
|
||||
>
|
||||
<Button variant="outline">
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</Link>
|
||||
<Button onClick={handleDownload}>
|
||||
<DownloadIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={coverRef} className="bg-background p-4 border">
|
||||
{coverState !== null ? (
|
||||
coverState
|
||||
) : (
|
||||
<div
|
||||
className="tiptap"
|
||||
dangerouslySetInnerHTML={{ __html: cover.data?.cover.letter || "" }}
|
||||
/>
|
||||
)}
|
||||
<div ref={coverRef} className="bg-background p-4 border">
|
||||
{coverState !== null ? (
|
||||
coverState
|
||||
) : (
|
||||
<div
|
||||
className="tiptap"
|
||||
dangerouslySetInnerHTML={{ __html: cover.data?.cover.letter || "" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Authorised>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user