primary color for active slug in breadcrumb
All checks were successful
Deploy / deploy (ubuntu-latest, 2.44.0) (push) Successful in 53s

Took 4 minutes
This commit is contained in:
Braydon 2024-10-06 19:40:45 -04:00
parent f6bd4a2dcb
commit c99a21395b

View File

@ -13,6 +13,7 @@ import { capitalizeWords } from "@/lib/string";
import { Metadata } from "next"; import { Metadata } from "next";
import Embed from "@/components/embed"; import Embed from "@/components/embed";
import DocsFooter from "@/components/docs-footer"; import DocsFooter from "@/components/docs-footer";
import { cn } from "@/lib/utils";
/** /**
* The page to render the documentation markdown content. * The page to render the documentation markdown content.
@ -46,12 +47,16 @@ const DocsPage = async ({
<BreadcrumbList> <BreadcrumbList>
{splitSlug.map( {splitSlug.map(
(part: string, index: number): ReactElement => { (part: string, index: number): ReactElement => {
const active: boolean =
index === splitSlug.length - 1;
const slug: string = splitSlug const slug: string = splitSlug
.slice(1, index + 1) .slice(1, index + 1)
.join("/"); .join("/");
return ( return (
<div className="flex items-center" key={part}> <div className="flex items-center" key={part}>
<BreadcrumbItem> <BreadcrumbItem
className={cn(active && "text-primary")}
>
<BreadcrumbLink <BreadcrumbLink
href={slug} href={slug}
draggable={false} draggable={false}