ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

ui: redesign

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-10-03 23:54:53 +02:00
parent 689f14dff7
commit e134d0e1d1
9 changed files with 137 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/client/app/components/layout.tsx
View File

@@ -1,13 +1,13 @@
import { useMutation } from "@tanstack/react-query";
import { Outlet, useNavigate } from "react-router";
import { toast } from "sonner";
import { logoutMutation } from "~/api-client/@tanstack/react-query.gen";
import { appContext } from "~/context";
import { cn } from "~/lib/utils";
import { authMiddleware } from "~/middleware/auth";
import type { Route } from "./+types/layout";
import { AppBreadcrumb } from "./app-breadcrumb";
import { Button } from "./ui/button";
import { logoutMutation } from "~/api-client/@tanstack/react-query.gen";
import type { Route } from "./+types/layout";
import { appContext } from "~/context";
import { authMiddleware } from "~/middleware/auth";
export const clientMiddleware = [authMiddleware];
@@ -39,19 +39,23 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
)}
>
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto">
<div className="flex items-center justify-between mb-4">
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-card"></div>
<header className="relative bg-card-header border-b border-border/50">
<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-4 container mx-auto">
<AppBreadcrumb />
{loaderData.user && (
<div className="flex items-center gap-4">
<span className="text-sm text-muted-foreground">Welcome, {loaderData.user?.username}</span>
<span className="text-sm text-muted-foreground">
Welcome, <span className="text-strong-accent">{loaderData.user?.username}</span>
</span>
<Button variant="outline" size="sm" onClick={() => logout.mutate({})} loading={logout.isPending}>
Logout
</Button>
</div>
)}
</div>
</header>
<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto">
<Outlet />
</main>
</div>