70 lines
1.5 KiB
TypeScript
70 lines
1.5 KiB
TypeScript
import Link from "next/link"
|
|
|
|
import { PAGES_NEW } from "@/lib/docs"
|
|
import {
|
|
getPagesFromFolder,
|
|
type PageTreeFolder,
|
|
type PageTreePage,
|
|
} from "@/lib/page-tree"
|
|
|
|
function ComponentLink({
|
|
component,
|
|
showNewIndicator,
|
|
}: {
|
|
component: PageTreePage
|
|
showNewIndicator: boolean
|
|
}) {
|
|
const isNew = showNewIndicator && PAGES_NEW.includes(component.url)
|
|
|
|
return (
|
|
<Link
|
|
href={component.url}
|
|
className="inline-flex items-center gap-2 text-lg font-medium underline-offset-4 hover:underline md:text-base"
|
|
>
|
|
{component.name}
|
|
{isNew && (
|
|
<>
|
|
<span className="sr-only">New</span>
|
|
<span
|
|
aria-hidden="true"
|
|
className="flex size-2 rounded-full bg-blue-500"
|
|
/>
|
|
</>
|
|
)}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export function ComponentsList({
|
|
componentsFolder,
|
|
currentBase,
|
|
variant = "all",
|
|
}: {
|
|
componentsFolder: PageTreeFolder
|
|
currentBase: string
|
|
variant?: "all" | "new"
|
|
}) {
|
|
const list = getPagesFromFolder(componentsFolder, currentBase).filter(
|
|
(component) => variant === "all" || PAGES_NEW.includes(component.url)
|
|
)
|
|
|
|
if (!list.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div
|
|
data-not-typeset
|
|
className="mt-8 grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-x-8 lg:gap-x-16 lg:gap-y-6 xl:gap-x-20"
|
|
>
|
|
{list.map((component) => (
|
|
<ComponentLink
|
|
key={component.$id}
|
|
component={component}
|
|
showNewIndicator={variant === "all"}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|