chore: add a breadcrumb component

2 files changed, 74 insertions, 0 deletions

diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
new file mode 100644
index 0000000..bfba21f
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.module.scss
@@ -0,0 +1,21 @@
+@use "@styles/abstracts/placeholders";
+
+.list {
+  @extend %reset-ordered-list;
+
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-sm);
+}
+
+.item {
+  &:not(:last-of-type) {
+    &::after {
+      content: ">";
+      margin-left: var(--spacing-2xs);
+    }
+  }
+}
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 0000000..e090a4f
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,53 @@
+import { t } from '@lingui/macro';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import styles from './Breadcrumb.module.scss';
+
+const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => {
+  const router = useRouter();
+
+  const isHome = router.pathname === '/';
+  const isBlog = router.pathname === '/blog';
+  const isArticle = router.pathname.includes('/article/');
+  const isThematic = router.pathname.includes('/thematique/');
+  const isSubject = router.pathname.includes('/sujet/');
+
+  const getItems = () => {
+    return (
+      <>
+        <li className={styles.item}>
+          <Link href="/">
+            <a>{t`Home`}</a>
+          </Link>
+        </li>
+        {isBlog && <li className={styles.item}>{t`Blog`}</li>}
+        {(isArticle || isThematic || isSubject) && (
+          <>
+            <li className={styles.item}>
+              <Link href="/blog">
+                <a>{t`Blog`}</a>
+              </Link>
+            </li>
+            <li className={styles.item}>{pageTitle}</li>
+          </>
+        )}
+        {!isBlog && !isArticle && !isThematic && !isSubject && (
+          <li className={styles.item}>{pageTitle}</li>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <>
+      {!isHome && (
+        <nav>
+          <span className="screen-reader-text">{t`You are here:`}</span>
+          <ol className={styles.list}>{getItems()}</ol>
+        </nav>
+      )}
+    </>
+  );
+};
+
+export default Breadcrumb;