Import source: src/components/shell/header
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,215 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
Bell,
|
||||
CircleHelp,
|
||||
Command,
|
||||
LogOut,
|
||||
Menu,
|
||||
MonitorCog,
|
||||
Moon,
|
||||
Search,
|
||||
Sun,
|
||||
UserCircle,
|
||||
} from "lucide-react";
|
||||
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
||||
import { panelService } from "@/api/services/panel-service";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Logo } from "@/components/common/logo";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useUiStore } from "@/stores/ui-store";
|
||||
|
||||
export function Header() {
|
||||
const { data } = useQuery({
|
||||
queryKey: ["dashboard-summary"],
|
||||
queryFn: () => panelService.dashboard.summary(),
|
||||
});
|
||||
const setCommandOpen = useUiStore((state) => state.setCommandOpen);
|
||||
const setTheme = useUiStore((state) => state.setTheme);
|
||||
const setDensity = useUiStore((state) => state.setDensity);
|
||||
const setMobileSidebarOpen = useUiStore((state) => state.setMobileSidebarOpen);
|
||||
const collapsed = useUiStore((state) => state.sidebarCollapsed);
|
||||
const summary = data?.data;
|
||||
|
||||
return (
|
||||
<header
|
||||
className={cn(
|
||||
"glass-bar sticky top-2 z-20 mx-2 flex h-[var(--header-height)] items-center gap-2 rounded-xl border border-border/60 px-3 transition-[margin] sm:gap-3 lg:mr-3",
|
||||
collapsed ? "lg:ml-[96px]" : "lg:ml-[calc(var(--sidebar-width)+24px)]",
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
className="lg:hidden"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => setMobileSidebarOpen(true)}
|
||||
aria-label="Open navigation"
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
<Link href="/dashboard" className="lg:hidden">
|
||||
<Logo compact />
|
||||
</Link>
|
||||
<div className="relative hidden min-w-44 flex-1 md:block">
|
||||
<Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
className="pl-8"
|
||||
placeholder="Search tools, domains, files, users"
|
||||
onFocus={() => setCommandOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-auto md:ml-0"
|
||||
onClick={() => setCommandOpen(true)}
|
||||
>
|
||||
<Command className="h-4 w-4" />
|
||||
<kbd className="hidden border-border/70 sm:inline-flex">Ctrl K</kbd>
|
||||
</Button>
|
||||
<Select defaultValue={summary?.account.id ?? "acct-main"}>
|
||||
<SelectTrigger className="hidden w-44 xl:flex">
|
||||
<SelectValue placeholder="Account" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{summary?.accounts.map((account) => (
|
||||
<SelectItem key={account.id} value={account.id}>
|
||||
{account.username}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select defaultValue={summary?.server.id ?? "srv-dal-01"}>
|
||||
<SelectTrigger className="hidden w-48 xl:flex">
|
||||
<SelectValue placeholder="Server" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{summary?.servers.map((server) => (
|
||||
<SelectItem key={server.id} value={server.id}>
|
||||
{server.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<HeaderMenu
|
||||
icon={<Bell className="h-4 w-4" />}
|
||||
label="Notifications"
|
||||
items={[
|
||||
"Email queue has deferred messages",
|
||||
"Backup verified",
|
||||
"Certificate renewal queued",
|
||||
]}
|
||||
/>
|
||||
<HeaderMenu
|
||||
icon={<CircleHelp className="h-4 w-4" />}
|
||||
label="Help"
|
||||
items={["Documentation", "Keyboard shortcuts", "Support tickets"]}
|
||||
/>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<Button size="icon" variant="ghost" aria-label="Theme selector">
|
||||
<Sun className="h-4 w-4 dark:hidden" />
|
||||
<Moon className="hidden h-4 w-4 dark:block" />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
align="end"
|
||||
className="glass-modal z-50 w-44 rounded-lg p-1 data-[state=open]:animate-scale-in"
|
||||
>
|
||||
{(["light", "dark", "system"] as const).map((theme) => (
|
||||
<DropdownMenu.Item
|
||||
key={theme}
|
||||
className="rounded-md px-2 py-1.5 text-sm capitalize outline-none transition-colors hover:bg-primary/10 hover:text-primary"
|
||||
onSelect={() => setTheme(theme)}
|
||||
>
|
||||
{theme}
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
<DropdownMenu.Separator className="my-1 h-px bg-border/70" />
|
||||
<DropdownMenu.Item
|
||||
className="rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary/10 hover:text-primary"
|
||||
onSelect={() => setDensity("compact")}
|
||||
>
|
||||
Compact density
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
className="rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary/10 hover:text-primary"
|
||||
onSelect={() => setDensity("comfortable")}
|
||||
>
|
||||
Comfortable density
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<UserCircle className="h-4 w-4" />
|
||||
<span className="hidden md:inline">{summary?.user.name ?? "Account"}</span>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
align="end"
|
||||
className="glass-modal z-50 w-56 rounded-lg p-1 data-[state=open]:animate-scale-in"
|
||||
>
|
||||
<DropdownMenu.Label className="px-2 py-1.5 text-xs text-muted-foreground">
|
||||
{summary?.user.email}
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Item className="rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary/10 hover:text-primary">
|
||||
<MonitorCog className="mr-2 inline h-4 w-4" />
|
||||
Profile settings
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item className="rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary/10 hover:text-primary">
|
||||
<LogOut className="mr-2 inline h-4 w-4" />
|
||||
<Link href="/logout">Logout</Link>
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function HeaderMenu({
|
||||
icon,
|
||||
label,
|
||||
items,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
items: string[];
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<Button size="icon" variant="ghost" aria-label={label}>
|
||||
{icon}
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
align="end"
|
||||
className="glass-modal z-50 w-72 rounded-lg p-1 data-[state=open]:animate-scale-in"
|
||||
>
|
||||
<DropdownMenu.Label className="px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{label}
|
||||
</DropdownMenu.Label>
|
||||
{items.map((item) => (
|
||||
<DropdownMenu.Item
|
||||
key={item}
|
||||
className="rounded-md px-2 py-2 text-sm outline-none transition-colors hover:bg-primary/10 hover:text-primary"
|
||||
>
|
||||
{item}
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user