mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-25 21:56:08 +00:00
05145e66d3
* feat(www): add login blocks * chore(www): restructure for blocks * chore: build registry * chore: clean up chunks * fix(www): chart categories * feat(www): big registry refactor * feat(www): update blocks * feat: complex blocks * fix: update schema * feat: sync new-york and default * fix: lint * feat: move charts * fix(www): code * fix: src path * chore: rebuild registry * fix: screenshot * fix: set new-york as default
103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
|
|
|
|
const examples = [
|
|
{
|
|
name: "Mail",
|
|
href: "/examples/mail",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
|
|
hidden: false,
|
|
},
|
|
{
|
|
name: "Dashboard",
|
|
href: "/examples/dashboard",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
|
|
hidden: false,
|
|
},
|
|
{
|
|
name: "Tasks",
|
|
href: "/examples/tasks",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks",
|
|
hidden: false,
|
|
},
|
|
{
|
|
name: "Playground",
|
|
href: "/examples/playground",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground",
|
|
hidden: false,
|
|
},
|
|
{
|
|
name: "Forms",
|
|
href: "/examples/forms",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms",
|
|
hidden: false,
|
|
},
|
|
{
|
|
name: "Music",
|
|
href: "/examples/music",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music",
|
|
hidden: false,
|
|
},
|
|
{
|
|
name: "Authentication",
|
|
href: "/examples/authentication",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication",
|
|
hidden: false,
|
|
},
|
|
]
|
|
|
|
interface ExamplesNavProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
|
|
export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<div className="relative">
|
|
<ScrollArea className="max-w-[600px] lg:max-w-none">
|
|
<div className={cn("flex items-center", className)} {...props}>
|
|
<ExampleLink
|
|
example={{ name: "Examples", href: "/", code: "", hidden: false }}
|
|
isActive={pathname === "/"}
|
|
/>
|
|
{examples.map((example) => (
|
|
<ExampleLink
|
|
key={example.href}
|
|
example={example}
|
|
isActive={pathname?.startsWith(example.href) ?? false}
|
|
/>
|
|
))}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" className="invisible" />
|
|
</ScrollArea>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ExampleLink({
|
|
example,
|
|
isActive,
|
|
}: {
|
|
example: (typeof examples)[number]
|
|
isActive: boolean
|
|
}) {
|
|
if (example.hidden) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href={example.href}
|
|
key={example.href}
|
|
className="flex h-7 items-center justify-center rounded-full px-4 text-center text-sm font-medium text-muted-foreground transition-colors hover:text-primary data-[active=true]:bg-muted data-[active=true]:text-primary"
|
|
data-active={isActive}
|
|
>
|
|
{example.name}
|
|
</Link>
|
|
)
|
|
}
|