mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-09-07 08:26:15 +00:00
80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { Logo } from "@ui/assets/Logo"
|
|
import { cn } from "@lib/utils"
|
|
import { ChevronRight, Cog, Home, LayoutGrid, SearchIcon } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
|
|
const LINKS = [
|
|
{ href: "/", label: "Home", icon: Home },
|
|
{ href: "/settings", label: "Settings", icon: Cog },
|
|
] as const
|
|
|
|
export function AppNav() {
|
|
const pathname = usePathname()
|
|
const openSearch = () => {
|
|
window.dispatchEvent(new Event("supermemory:open-search"))
|
|
}
|
|
|
|
return (
|
|
<header className="relative z-10 flex shrink-0 items-center justify-between gap-1.5 p-2.5 md:gap-2 md:p-3">
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<Link
|
|
href="/"
|
|
className="relative flex shrink-0 items-center rounded-lg px-1.5 py-1 transition-colors hover:bg-white/[0.05]"
|
|
>
|
|
<Logo className="h-6 shrink-0" />
|
|
<div className="ml-2 min-w-0">
|
|
<div className="truncate text-[10px] leading-tight text-[#6B6B6B]">
|
|
My
|
|
</div>
|
|
<div className="-mt-0.5 truncate font-medium text-lg text-white/90 leading-none">
|
|
supermemory
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<ChevronRight className="hidden size-4 shrink-0 text-[#3F4853] md:block" />
|
|
|
|
<div className="hidden items-center gap-1 rounded-full border border-[#161F2C] bg-[#0D121A]/80 p-1 md:flex">
|
|
{LINKS.map(({ href, label, icon: Icon }) => {
|
|
const active = pathname === href
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"inline-flex h-8 items-center gap-1.5 rounded-full border border-transparent px-3 font-medium text-sm transition-colors",
|
|
active
|
|
? "border-[#2261CA33] bg-[#00173C] text-white"
|
|
: "text-[#D0DAE7] hover:bg-white/[0.05] hover:text-white",
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
{label}
|
|
</Link>
|
|
)
|
|
})}
|
|
<button
|
|
type="button"
|
|
className="inline-flex h-8 items-center gap-1.5 rounded-full border border-transparent px-3 font-medium text-[#D0DAE7] text-sm transition-colors hover:bg-white/[0.05] hover:text-white"
|
|
>
|
|
<LayoutGrid className="size-4" />
|
|
Memories
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex shrink-0 items-center gap-1.5">
|
|
<button
|
|
type="button"
|
|
onClick={openSearch}
|
|
className="flex size-9 items-center justify-center rounded-full border border-[#161F2C] bg-[#0D121A]/80 text-[#D0DAE7] transition-colors hover:bg-white/[0.05] hover:text-white"
|
|
aria-label="Search"
|
|
>
|
|
<SearchIcon className="size-4" />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|