61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { serverClient } from "@/lib/trpc/server"
|
|
|
|
import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
|
|
import styles from "./breadcrumbs.module.css"
|
|
|
|
export default async function Breadcrumbs() {
|
|
const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
|
|
if (!breadcrumbs?.length) {
|
|
return null
|
|
}
|
|
|
|
const homeBreadcrumb = breadcrumbs.shift()
|
|
return (
|
|
<nav className={styles.breadcrumbs}>
|
|
<ul className={styles.list}>
|
|
{homeBreadcrumb ? (
|
|
<li className={styles.listItem}>
|
|
<Link
|
|
className={styles.homeLink}
|
|
color="peach80"
|
|
href={homeBreadcrumb.href!}
|
|
variant="breadcrumb"
|
|
>
|
|
<HouseIcon color="peach80" />
|
|
</Link>
|
|
<ChevronRightIcon aria-hidden="true" color="peach80" />
|
|
</li>
|
|
) : null}
|
|
|
|
{breadcrumbs.map((breadcrumb) => {
|
|
if (breadcrumb.href) {
|
|
return (
|
|
<li key={breadcrumb.uid} className={styles.listItem}>
|
|
<Link
|
|
color="peach80"
|
|
href={breadcrumb.href}
|
|
variant="breadcrumb"
|
|
>
|
|
{breadcrumb.title}
|
|
</Link>
|
|
<ChevronRightIcon aria-hidden="true" color="peach80" />
|
|
</li>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<li key={breadcrumb.uid} className={styles.listItem}>
|
|
<Footnote color="burgundy" textTransform="bold">
|
|
{breadcrumb.title}
|
|
</Footnote>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
)
|
|
}
|