From 5c28152485aff5b1fc45554d18a592ff8d589b2e Mon Sep 17 00:00:00 2001
From: Gary van Woerkens <gary.van-woerkens@sg.social.gouv.fr>
Date: Fri, 11 Aug 2023 20:50:59 +0200
Subject: [PATCH] feat: add basic breadcrumbs (#1036)

---
 src/app/startups/layout.tsx    | 14 ++++++++++
 src/app/startups/page.tsx      |  2 +-
 src/components/breadcrumbs.tsx | 50 ++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/app/startups/layout.tsx
 create mode 100644 src/components/breadcrumbs.tsx

diff --git a/src/app/startups/layout.tsx b/src/app/startups/layout.tsx
new file mode 100644
index 000000000..4f486d06b
--- /dev/null
+++ b/src/app/startups/layout.tsx
@@ -0,0 +1,14 @@
+import Breadcrumbs from "@/components/breadcrumbs"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <Breadcrumbs />
+      {children}
+    </>
+  )
+}
diff --git a/src/app/startups/page.tsx b/src/app/startups/page.tsx
index 3198e699d..f28097593 100644
--- a/src/app/startups/page.tsx
+++ b/src/app/startups/page.tsx
@@ -3,7 +3,7 @@ import List from "./list"
 
 export default function Startups() {
   return (
-    <section className={fr.cx("fr-container", "fr-py-6w")}>
+    <section className={fr.cx("fr-container", "fr-pb-6w")}>
       <h1 className={fr.cx("fr-h1")}>Nos startups</h1>
       <List />
     </section>
diff --git a/src/components/breadcrumbs.tsx b/src/components/breadcrumbs.tsx
new file mode 100644
index 000000000..870eed9c6
--- /dev/null
+++ b/src/components/breadcrumbs.tsx
@@ -0,0 +1,50 @@
+"use client"
+import { usePathname } from "next/navigation"
+import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb"
+
+import type { ReactNode } from "react"
+import type { RegisteredLinkProps } from "@codegouvfr/react-dsfr/link"
+
+import getStartup from "@/app/startups/[id]/get-startup"
+
+function capitalizeFirstLetter(s: string) {
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+export default function Breadcrumbs() {
+  const pathname = usePathname()
+  const crumbs = pathname.split("/")
+
+  // TODO: rewrite
+  let currentPageLabel = ""
+  let segments: {
+    label: ReactNode
+    linkProps: RegisteredLinkProps
+  }[] = []
+
+  crumbs.shift()
+
+  if (crumbs.length === 1) {
+    currentPageLabel = capitalizeFirstLetter(crumbs[0])
+  } else {
+    currentPageLabel = getStartup(crumbs[1]).attributes.name
+    segments = [
+      {
+        label: capitalizeFirstLetter(crumbs[0]),
+        linkProps: {
+          href: `/${crumbs[0]}`,
+        },
+      },
+    ]
+  }
+
+  return (
+    <div className="fr-container">
+      <Breadcrumb
+        segments={segments}
+        homeLinkProps={{ href: "/" }}
+        currentPageLabel={currentPageLabel}
+      />
+    </div>
+  )
+}