feat: add breadcrumbs to documentation

tuono-labs · Aug 15, 2024 · b2940d9 · b2940d9
1 parent a7b7f0e
commit b2940d9
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 0 deletions.
diff --git a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,46 @@
+import { Breadcrumbs, Button } from '@mantine/core'
+import { Link } from 'tuono'
+
+import { IconChevronRight, IconBolt } from '@tabler/icons-react'
+import type { ReactNode } from 'react'
+
+export default function TuonoBreadcrumbs({
+  children,
+}: {
+  children: ReactNode
+}): JSX.Element {
+  return (
+    <Breadcrumbs
+      separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
+      mb="md"
+      mt="md"
+    >
+      <Button href="/" component={Link} variant="subtle" radius="xl" p={5}>
+        <IconBolt />
+      </Button>
+      {children}
+    </Breadcrumbs>
+  )
+}
+
+interface BreadcrumbElementProps {
+  href?: string
+  label: string
+}
+
+export function BreadcrumbElement({
+  href,
+  label,
+}: BreadcrumbElementProps): JSX.Element {
+  return (
+    <Button
+      component={href ? Link : 'span'}
+      href={href}
+      variant={href ? 'subtle' : 'light'}
+      radius="xl"
+      px={href ? 10 : undefined}
+    >
+      {label}
+    </Button>
+  )
+}
diff --git a/apps/documentation/src/components/breadcrumbs/index.ts b/apps/documentation/src/components/breadcrumbs/index.ts
@@ -0,0 +1,5 @@
+import Breadcrumbs, { BreadcrumbElement } from './breadcrumbs'
+
+export default Breadcrumbs
+
+export { BreadcrumbElement as Element }
diff --git a/apps/documentation/src/routes/documentation/contributing.mdx b/apps/documentation/src/routes/documentation/contributing.mdx
@@ -4,6 +4,12 @@ import { Head } from 'tuono'
   <title>Tuono - Contributing</title>
 </Head>
 
+import Breadcrumbs, { Element } from '../../components/breadcrumbs'
+
+<Breadcrumbs>
+		<Element label="Contributing"/>
+</Breadcrumbs>
+
 # How to contribute
 
 ## TL;DR

diff --git a/apps/documentation/src/routes/documentation/installation.mdx b/apps/documentation/src/routes/documentation/installation.mdx
@@ -1,9 +1,14 @@
 import { Head } from 'tuono'
+import Breadcrumbs, { Element } from '../../components/breadcrumbs'
 
 <Head>
   <title>Tuono - Installation</title>
 </Head>
 
+<Breadcrumbs>
+		<Element label="Installation"/>
+</Breadcrumbs>
+
 # Installation
 
 ## Requirements

diff --git a/apps/documentation/src/routes/documentation/routing/index.mdx b/apps/documentation/src/routes/documentation/routing/index.mdx
@@ -4,4 +4,12 @@ import { Head } from 'tuono'
   <title>Tuono - Routing</title>
 </Head>
 
+import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
+
+<Breadcrumbs>
+		<Element label="Routing"/>
+</Breadcrumbs>
+
 # Routing index
+
+TODO
diff --git a/apps/documentation/src/routes/documentation/routing/intro.mdx b/apps/documentation/src/routes/documentation/routing/intro.mdx
@@ -4,6 +4,13 @@ import { Head } from 'tuono'
   <title>Tuono - Routing</title>
 </Head>
 
+import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
+
+<Breadcrumbs>
+		<Element label="Routing" href="/documentation/routing"/>
+		<Element label="Project structure"/>
+</Breadcrumbs>
+
 # Project structure
 
 Todo
diff --git a/apps/documentation/src/routes/documentation/tutorial/intro.mdx b/apps/documentation/src/routes/documentation/tutorial/intro.mdx
@@ -4,6 +4,12 @@ import { Head } from 'tuono'
   <title>Tuono - Tutorial intro</title>
 </Head>
 
+import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
+
+<Breadcrumbs>
+		<Element label="Tutorial"/>
+</Breadcrumbs>
+
 # Tutorial intro
 
 TODO