42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { cn } from "cn"
|
|
|
|
import { getColors } from "@/lib/colors"
|
|
import { ScrollArea, ScrollBar } from "@/registry/new-york-v4/ui/scroll-area"
|
|
|
|
export function ColorsNav({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">) {
|
|
const pathname = usePathname()
|
|
const colors = getColors()
|
|
|
|
return (
|
|
<div className={cn("flex items-center", className)} {...props}>
|
|
<ScrollArea className="max-w-full">
|
|
<div className="flex items-center">
|
|
{colors.map((colorPalette, index) => (
|
|
<Link
|
|
href={`/colors#${colorPalette.name}`}
|
|
key={colorPalette.name}
|
|
data-active={
|
|
pathname?.startsWith(colorPalette.name) ||
|
|
(index === 0 && pathname === "/colors")
|
|
}
|
|
className={cn(
|
|
"flex h-7 items-center justify-center px-4 text-center text-base font-medium text-muted-foreground capitalize transition-colors hover:text-primary data-[active=true]:text-primary"
|
|
)}
|
|
>
|
|
{colorPalette.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" className="invisible" />
|
|
</ScrollArea>
|
|
</div>
|
|
)
|
|
}
|