31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { SidebarTrigger } from "@/components/ui/sidebar"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { ThemeToggle } from "./theme-toggle"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Command } from "lucide-react"
|
|
|
|
export function Header() {
|
|
return (
|
|
<header className="sticky top-0 z-50 flex h-14 items-center gap-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4">
|
|
<SidebarTrigger className="-ml-1" />
|
|
<Separator orientation="vertical" className="h-6" />
|
|
|
|
<div className="flex flex-1 items-center justify-between">
|
|
<Button
|
|
variant="outline"
|
|
className="relative h-8 w-full max-w-sm justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
|
|
>
|
|
<span className="inline-flex">Search...</span>
|
|
<kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
|
|
<Command className="h-3 w-3" />K
|
|
</kbd>
|
|
</Button>
|
|
|
|
<ThemeToggle />
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|