36 lines
1.8 KiB
TypeScript
36 lines
1.8 KiB
TypeScript
|
|
import { Outlet } from "react-router-dom";
|
|
import { AppSidebar } from "../components/AppSidebar";
|
|
import { SidebarProvider, SidebarInset, SidebarTrigger } from "../components/ui/sidebar";
|
|
import { Separator } from "../components/ui/separator";
|
|
|
|
export function DashboardLayout() {
|
|
return (
|
|
<SidebarProvider>
|
|
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
|
|
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 blur-[120px] rounded-full animate-pulse" />
|
|
<div className="absolute bottom-[-10%] right-[-10%] w-[30%] h-[30%] bg-purple-500/10 blur-[100px] rounded-full" />
|
|
</div>
|
|
|
|
<AppSidebar />
|
|
<SidebarInset className="bg-transparent">
|
|
<header className="flex h-16 shrink-0 items-center gap-2 px-6 backdrop-blur-md bg-background/30 border-b border-white/5 sticky top-0 z-10">
|
|
<SidebarTrigger className="-ml-1 hover:bg-white/5 transition-colors" />
|
|
<Separator orientation="vertical" className="mx-4 h-4 bg-white/10" />
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="text-lg font-semibold tracking-tight text-glow">Dashboard</h1>
|
|
</div>
|
|
<div className="ml-auto flex items-center gap-4">
|
|
<div className="h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
|
|
</div>
|
|
</header>
|
|
<main className="flex flex-1 flex-col gap-6 p-6">
|
|
<div className="flex-1 rounded-2xl md:min-h-min">
|
|
<Outlet />
|
|
</div>
|
|
</main>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
);
|
|
}
|