feat(SW-66, SW-348): search functionality and ui

components/Breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,30 @@
+.breadcrumbs {
+  display: block;
+  padding-left: var(--Spacing-x2);
+  padding-right: var(--Spacing-x2);
+  padding-top: var(--Spacing-x2);
+}
+
+.list {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x-quarter);
+  justify-content: flex-start;
+  list-style: none;
+}
+
+.listItem {
+  align-items: center;
+  display: flex;
+}
+
+.homeLink {
+  display: flex;
+}
+
+@media screen and (min-width: 1367px) {
+  .breadcrumbs {
+    padding-left: var(--Spacing-x5);
+    padding-right: var(--Spacing-x5);
+  }
+}

components/Breadcrumbs/index.tsx

@@ -0,0 +1,60 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./breadcrumbs.module.css"
+
+export default async function Breadcrumbs() {
+  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
+  if (!breadcrumbs?.length) {
+    return null
+  }
+
+  const homeBreadcrumb = breadcrumbs.shift()
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        {homeBreadcrumb ? (
+          <li className={styles.listItem}>
+            <Link
+              className={styles.homeLink}
+              color="peach80"
+              href={homeBreadcrumb.href!}
+              variant="breadcrumb"
+            >
+              <HouseIcon color="peach80" />
+            </Link>
+            <ChevronRightIcon aria-hidden="true" color="peach80" />
+          </li>
+        ) : null}
+
+        {breadcrumbs.map((breadcrumb) => {
+          if (breadcrumb.href) {
+            return (
+              <li key={breadcrumb.uid} className={styles.listItem}>
+                <Link
+                  color="peach80"
+                  href={breadcrumb.href}
+                  variant="breadcrumb"
+                >
+                  {breadcrumb.title}
+                </Link>
+                <ChevronRightIcon aria-hidden="true" color="peach80" />
+              </li>
+            )
+          }
+
+          return (
+            <li key={breadcrumb.uid} className={styles.listItem}>
+              <Footnote color="burgundy" textTransform="bold">
+                {breadcrumb.title}
+              </Footnote>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}