mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-07 14:08:47 +00:00
2c2fe97eb9
* feat: move new-york to lucide-react * fix: mail open * chore: update registry * chore: add test:dev * chore: add changeset * feat: build an icon registry * chore: add missing registry icons * feat: add an icons debug page * feat: add an icon migration * chore(www): migrate all radix icons to lucide * feat: update migration script * chore: update changeset * feat(shadcn): implement icons transformer * fix: missing registry icons * fix(shadcn): handling of missing icons * feat: add support for multiple libraries
106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { ArrowRight } from "lucide-react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
|
|
|
|
const examples = [
|
|
{
|
|
name: "Examples",
|
|
href: "/examples/cards",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
|
|
},
|
|
{
|
|
name: "Mail",
|
|
href: "/examples/mail",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
|
|
},
|
|
{
|
|
name: "Dashboard",
|
|
href: "/examples/dashboard",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
|
|
},
|
|
{
|
|
name: "Tasks",
|
|
href: "/examples/tasks",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks",
|
|
},
|
|
{
|
|
name: "Playground",
|
|
href: "/examples/playground",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground",
|
|
},
|
|
{
|
|
name: "Forms",
|
|
href: "/examples/forms",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms",
|
|
},
|
|
{
|
|
name: "Music",
|
|
href: "/examples/music",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music",
|
|
},
|
|
{
|
|
name: "Authentication",
|
|
href: "/examples/authentication",
|
|
code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication",
|
|
},
|
|
]
|
|
|
|
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("mb-4 flex items-center", className)} {...props}>
|
|
{examples.map((example, index) => (
|
|
<Link
|
|
href={example.href}
|
|
key={example.href}
|
|
className={cn(
|
|
"flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
|
|
pathname?.startsWith(example.href)
|
|
? "bg-muted font-medium text-primary"
|
|
: "text-muted-foreground"
|
|
)}
|
|
>
|
|
{example.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<ScrollBar orientation="horizontal" className="invisible" />
|
|
</ScrollArea>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface ExampleCodeLinkProps {
|
|
pathname: string | null
|
|
}
|
|
|
|
export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) {
|
|
const example = examples.find((example) => pathname?.startsWith(example.href))
|
|
|
|
if (!example?.code) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href={example?.code}
|
|
target="_blank"
|
|
rel="nofollow"
|
|
className="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex"
|
|
>
|
|
View code
|
|
<ArrowRight className="ml-1 h-4 w-4" />
|
|
</Link>
|
|
)
|
|
}
|