Add breadcrumbs to pages

sgcarstrends · Jun 30, 2024 · fec3dc1 · fec3dc1
1 parent 4931416
commit fec3dc1
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 3 deletions.
diff --git a/app/cars/[type]/page.tsx b/app/cars/[type]/page.tsx
@@ -5,10 +5,19 @@ import { CarTreeMap } from "@/app/components/CarTreeMap";
 import { DataTable } from "@/app/components/DataTable";
 import { MonthSelect } from "@/app/components/MonthSelect";
 import { StructuredData } from "@/components/StructuredData";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   API_URL,
   EXCLUSION_LIST,
+  FEATURE_FLAG_RELEASED,
   POPULAR_MAKES_THRESHOLD,
   SITE_URL,
 } from "@/config";
@@ -87,6 +96,27 @@ const CarsByFuelTypePage = async ({ params, searchParams }: Props) => {
     <section>
       <StructuredData data={jsonLd} />
       <div className="flex flex-col gap-y-8">
+        {FEATURE_FLAG_RELEASED && (
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link href="/">Home</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link href="/cars">Cars</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>{capitaliseWords(type)}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        )}
         <div className="flex justify-between">
           <div className="flex items-end gap-x-2">
             <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">

diff --git a/app/cars/page.tsx b/app/cars/page.tsx
@@ -1,3 +1,12 @@
+import Link from "next/link";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
 import {
   Card,
   CardContent,
@@ -8,7 +17,7 @@ import {
 } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { CarPieChart } from "@/components/CarPieChart";
-import { API_URL, FUEL_TYPE } from "@/config";
+import { API_URL, FEATURE_FLAG_RELEASED, FUEL_TYPE } from "@/config";
 import { fetchApi } from "@/utils/fetchApi";
 import { formatPercent } from "@/utils/formatPercent";
 import type { Car } from "@/types";
@@ -151,7 +160,22 @@ const CarsPage = async ({ searchParams }: CarsPageProps) => {
   };
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-8">
+      {FEATURE_FLAG_RELEASED && (
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/">Home</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Cars</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      )}
       <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
         Dashboard
       </h1>

diff --git a/app/coe/page.tsx b/app/coe/page.tsx
@@ -1,10 +1,20 @@
 import { Metadata } from "next";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
 import { HistoricalResult } from "@/app/components/HistoricalResult";
 import { MonthlyResult } from "@/app/components/MonthlyResult";
-import { API_URL } from "@/config";
+import { API_URL, FEATURE_FLAG_RELEASED } from "@/config";
 import { fetchApi } from "@/utils/fetchApi";
 import { COEResult } from "@/types";
 import { ShowHideCOECategories } from "@/app/coe/ShowHideCOECategories";
+import Link from "next/link";
+import { capitaliseWords } from "@/utils/capitaliseWords";
 
 export const metadata: Metadata = { alternates: { canonical: "/coe" } };
 
@@ -26,6 +36,21 @@ const COEPage = async () => {
 
   return (
     <div className="flex flex-col gap-y-8">
+      {FEATURE_FLAG_RELEASED && (
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/">Home</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>COE</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      )}
       <ShowHideCOECategories />
       <HistoricalResult data={historicalResults} />
       {biddingRounds.map((round) => {