129 lines
3.9 KiB
TypeScript
129 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import { useCallback, useEffect, useState } from "react"
|
|
import { useTheme } from "next-themes"
|
|
import {
|
|
BellIcon,
|
|
MoonIcon,
|
|
SearchIcon,
|
|
SunIcon,
|
|
} from "lucide-react"
|
|
|
|
import { cn } from "@/shared/lib/utils"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { SidebarTrigger } from "@/shared/components/ui/sidebar"
|
|
import {
|
|
CommandDialog,
|
|
Command,
|
|
CommandInput,
|
|
CommandList,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandItem,
|
|
} from "@/shared/components/ui/command"
|
|
import { Separator } from "@/shared/components/ui/separator"
|
|
|
|
export type DashboardHeaderProps = {
|
|
actions?: React.ReactNode
|
|
className?: string
|
|
title?:string
|
|
}
|
|
|
|
export function DashboardHeader({ actions, className, title }: DashboardHeaderProps) {
|
|
const { resolvedTheme, setTheme } = useTheme()
|
|
const [searchOpen, setSearchOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
function onKeyDown(e: KeyboardEvent) {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
|
|
e.preventDefault()
|
|
setSearchOpen((prev) => !prev)
|
|
}
|
|
}
|
|
window.addEventListener("keydown", onKeyDown)
|
|
return () => window.removeEventListener("keydown", onKeyDown)
|
|
}, [])
|
|
|
|
const toggleTheme = useCallback(() => {
|
|
setTheme(resolvedTheme === "dark" ? "light" : "dark")
|
|
}, [resolvedTheme, setTheme])
|
|
|
|
return (
|
|
<header
|
|
className={cn(
|
|
"sticky top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b bg-card px-4",
|
|
className,
|
|
)}
|
|
>
|
|
{title && <h1 className="text-lg font-semibold">{title}</h1>}
|
|
|
|
{/* Sidebar toggle — mobile: hamburger, desktop: collapse */}
|
|
<SidebarTrigger className="-ms-2 md:hidden" />
|
|
<Separator orientation="vertical" className="md:hidden" />
|
|
|
|
{/* Left side — default actions */}
|
|
<div className="flex items-center gap-1">
|
|
{/* Search trigger */}
|
|
{/* <Button
|
|
variant="outline"
|
|
className="hidden h-8 w-56 justify-start gap-2 text-muted-foreground md:flex"
|
|
onClick={() => setSearchOpen(true)}
|
|
>
|
|
<SearchIcon className="size-4" />
|
|
<span className="text-sm">Search…</span>
|
|
<kbd className="pointer-events-none ms-auto inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
|
|
⌘K
|
|
</kbd>
|
|
</Button> */}
|
|
|
|
{/* Mobile search icon */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="md:hidden"
|
|
aria-label="Search"
|
|
onClick={() => setSearchOpen(true)}
|
|
>
|
|
<SearchIcon className="size-4" />
|
|
</Button>
|
|
|
|
{/* Theme toggle */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
aria-label="Toggle theme"
|
|
onClick={toggleTheme}
|
|
>
|
|
<SunIcon className="size-4 rotate-0 scale-100 transition-transform dark:-rotate-90 dark:scale-0" />
|
|
<MoonIcon className="absolute size-4 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100" />
|
|
</Button>
|
|
|
|
{/* Notifications */}
|
|
<Button variant="ghost" size="icon-sm" aria-label="Notifications">
|
|
<BellIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Search command dialog */}
|
|
<CommandDialog open={searchOpen} onOpenChange={setSearchOpen}>
|
|
<Command>
|
|
<CommandInput placeholder="Type to search…" />
|
|
<CommandList>
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
|
<CommandGroup heading="Quick Actions">
|
|
<CommandItem>Dashboard</CommandItem>
|
|
<CommandItem>Job Cards</CommandItem>
|
|
<CommandItem>Customers</CommandItem>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</CommandDialog>
|
|
|
|
{/* Right side — custom actions */}
|
|
{actions && (
|
|
<div className="ms-auto flex items-center gap-2">{actions}</div>
|
|
)}
|
|
</header>
|
|
)
|
|
}
|