From ef4fb0a5277ee99bd0f1747b77e733ef7f02460d Mon Sep 17 00:00:00 2001
From: flu0r1ne <flu0r1ne@flu0r1ne.net>
Date: Wed, 6 Sep 2023 19:53:23 -0500
Subject: Make BreadCrumbs domain agnostic

---
 components/BreadCrumbs/breadcrumbs.module.scss | 15 +++++++
 components/BreadCrumbs/index.tsx               | 56 ++++++++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 components/BreadCrumbs/breadcrumbs.module.scss
 create mode 100644 components/BreadCrumbs/index.tsx

(limited to 'components/BreadCrumbs')

diff --git a/components/BreadCrumbs/breadcrumbs.module.scss b/components/BreadCrumbs/breadcrumbs.module.scss
new file mode 100644
index 0000000..6facea4
--- /dev/null
+++ b/components/BreadCrumbs/breadcrumbs.module.scss
@@ -0,0 +1,15 @@
+.crumb {
+    font-size: 1.10rem;
+}
+
+.divider {
+    font-size: 1.0rem;
+}
+
+.crumb {
+    align-content: center;
+}
+
+.divider {
+    margin: 0 0.3rem;
+}
diff --git a/components/BreadCrumbs/index.tsx b/components/BreadCrumbs/index.tsx
new file mode 100644
index 0000000..693a9d0
--- /dev/null
+++ b/components/BreadCrumbs/index.tsx
@@ -0,0 +1,56 @@
+import React, { Children, FC } from "react";
+import Link from "next/link";
+import styles from './breadcrumbs.module.scss';
+import clsx from 'clsx';
+
+export type BreadCrumbsProps = {
+    className?: string;
+    style?: object;
+    children: React.ReactNode;
+};
+
+const BreadCrumbs : FC<BreadCrumbsProps> = ({children, className, ...props}) => (
+    <span className={clsx(styles.breadcrumbs, className)} {...props}>
+        {Children.map(children, (child, index) => {
+            return (
+                <>
+                    {
+                        index !== 0 ? (
+                            <span className={styles.divider}>/</span>
+                        ) : undefined
+                    }
+                    {child}
+                </>
+            );
+        })}
+    </span>
+);
+
+export type CrumbProps = {
+  children: React.ReactNode;
+};
+
+const Crumb : FC<CrumbProps> = ({children, ...props}) => (
+    <span className={styles.crumb} {...props}>
+        {children}
+    </span>
+);
+
+export type LinkCrumbProps = {
+    href: string;
+    children: React.ReactNode;
+}
+
+const LinkCrumb : FC<LinkCrumbProps> = ({children, href, ...props}) => (
+    <Crumb>
+        <Link href={href}>
+            {children}
+        </Link>
+    </Crumb>
+);
+
+export {
+    Crumb,
+    BreadCrumbs,
+    LinkCrumb
+};
-- 
cgit v1.2.3