Add breadcrumb.

src/components/common/Breadcrumb.module.css

@@ -0,0 +1,10 @@
+.bar {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--base600);
+}
+
+.link span {
+  color: var(--base700) !important;
+}

src/components/common/Breadcrumb.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { Flexbox, Icon, Icons, Text } from 'react-basics';
+import styles from './Breadcrumb.module.css';
+
+export interface BreadcrumbProps {
+  data: {
+    url?: string;
+    label: string;
+  }[];
+}
+
+export function Breadcrumb({ data }: BreadcrumbProps) {
+  return (
+    <Flexbox alignItems="center" gap={3} className={styles.bar}>
+      {data.map((a, i) => {
+        return (
+          <>
+            {a.url ? (
+              <Link href={a.url} className={styles.link}>
+                <Text>{a.label}</Text>
+              </Link>
+            ) : (
+              <Text>{a.label}</Text>
+            )}
+            {i !== data.length - 1 ? (
+              <Icon rotate={270}>
+                <Icons.ChevronDown />
+              </Icon>
+            ) : null}
+          </>
+        );
+      })}
+    </Flexbox>
+  );
+}
+
+export default Breadcrumb;

src/components/layout/PageHeader.module.css

@@ -27,6 +27,10 @@
   flex: 1;
 }
 
+.breadcrumb {
+  padding-top: 20px;
+}
+
 .icon {
   color: var(--base700);
   margin-inline-end: 1rem;

src/components/layout/PageHeader.tsx

@@ -7,23 +7,29 @@ export function PageHeader({
   title,
   icon,
   className,
+  breadcrumb,
   children,
 }: {
   title?: ReactNode;
   icon?: ReactNode;
   className?: string;
+  breadcrumb?: ReactNode;
   children?: ReactNode;
 }) {
   return (
-    <div className={classNames(styles.header, className)}>
-      {icon && (
-        <Icon size="lg" className={styles.icon}>
-          {icon}
-        </Icon>
-      )}
-      {title && <div className={styles.title}>{title}</div>}
-      <div className={styles.actions}>{children}</div>
-    </div>
+    <>
+      <div className={styles.breadcrumb}>{breadcrumb}</div>
+      <div className={classNames(styles.header, className)}>
+        {icon && (
+          <Icon size="lg" className={styles.icon}>
+            {icon}
+          </Icon>
+        )}
+
+        {title && <div className={styles.title}>{title}</div>}
+        <div className={styles.actions}>{children}</div>
+      </div>
+    </>
   );
 }