aboutsummaryrefslogtreecommitdiff
path: root/components/BreadCrumbs
diff options
context:
space:
mode:
Diffstat (limited to 'components/BreadCrumbs')
-rw-r--r--components/BreadCrumbs/breadcrumbs.module.scss15
-rw-r--r--components/BreadCrumbs/index.tsx56
2 files changed, 71 insertions, 0 deletions
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
+};