feat: add new pages

tuono-labs · Dec 4, 2024 · 6b5117e · 6b5117e
1 parent c831cea
commit 6b5117e
Show file tree

Hide file tree

Showing 14 changed files with 537 additions and 410 deletions.
diff --git a/apps/documentation/src/components/sidebar/config.ts b/apps/documentation/src/components/sidebar/config.ts
diff --git a/apps/documentation/src/components/sidebar/sidebar-link.module.css b/apps/documentation/src/components/sidebar/sidebar-link.module.css
@@ -1,16 +1,17 @@
 .link {
-	border-radius: 8px;
-	margin-top: 0.25rem;
-	line-height: 1rem;
-	font-weight: 500;
-	transition: 0.3s;
+  border-radius: 8px;
+  margin-top: 0.25rem;
+  line-height: 1rem;
+  font-weight: 500;
+  transition: 0.3s;
 }
 
 .link span {
-	font-size: 14px !important;
-	color: var(--mantine-color-sidebar-gray);
+  font-size: 14px !important;
+  color: var(--mantine-color-sidebar-gray);
 }
 
-.link:hover span {
-	color: var(--mantine-color-sidebar-text-hover);
+.link:hover span,
+.active span {
+  color: var(--mantine-color-sidebar-text-hover);
 }
diff --git a/apps/documentation/src/components/sidebar/sidebar-link.tsx b/apps/documentation/src/components/sidebar/sidebar-link.tsx
@@ -22,7 +22,7 @@ export default function SidebarLink(
 
   const internalProps = {
     active: isActive,
-    className: clsx(styles.link),
+    className: clsx(styles.link, isActive && styles.active),
     rightSection: props.children && (
       <IconChevronRight
         size="1.2rem"

diff --git a/apps/documentation/src/components/sidebar/sidebar.tsx b/apps/documentation/src/components/sidebar/sidebar.tsx
@@ -1,106 +1,106 @@
 import type { JSX } from 'react'
 import { sidebarElements } from './config'
 import {
-	AppShell,
-	Badge,
-	Flex,
-	Divider,
-	Title,
-	Button,
-	ScrollArea,
-	Text,
+  AppShell,
+  Badge,
+  Flex,
+  Divider,
+  Title,
+  Button,
+  ScrollArea,
+  Text,
 } from '@mantine/core'
 
 import SidebarLink from './sidebar-link'
 import { IconX } from '@tabler/icons-react'
 import { useMediaQuery } from '@mantine/hooks'
 
 interface SidebarProps {
-	close: () => void
+  close: () => void
 }
 
 function SidebarHeader(): JSX.Element {
-	const isSm = useMediaQuery('(min-width: 48em)')
-	return (
-		<AppShell.Section>
-			<Flex mb={20} w="100%" justify="space-between">
-				<Flex
-					gap={10}
-					align="center"
-					w={isSm ? '100%' : 'auto'}
-					justify="center"
-				>
-					<Title order={3}>Tuono</Title>
-					<Badge mt={4} size="xs" variant="outline">
-						Docs
-					</Badge>
-				</Flex>
-				<Button onClick={close} hiddenFrom="sm" variant="transparent" p="0">
-					<IconX />
-				</Button>
-			</Flex>
-		</AppShell.Section>
-	)
+  const isSm = useMediaQuery('(min-width: 48em)')
+  return (
+    <AppShell.Section>
+      <Flex mb={20} w="100%" justify="space-between">
+        <Flex
+          gap={10}
+          align="center"
+          w={isSm ? '100%' : 'auto'}
+          justify="center"
+        >
+          <Title order={3}>Tuono</Title>
+          <Badge mt={4} size="xs" variant="outline">
+            Docs
+          </Badge>
+        </Flex>
+        <Button onClick={close} hiddenFrom="sm" variant="transparent" p="0">
+          <IconX />
+        </Button>
+      </Flex>
+    </AppShell.Section>
+  )
 }
 
 function SidebarElements({ close }: SidebarProps): JSX.Element {
-	return (
-		<AppShell.Section component={ScrollArea}>
-			{sidebarElements.map((el, i) => {
-				if (el.type === 'divider') {
-					return <Divider my="md" mx={10} />
-				}
-				if (el.type === 'title') {
-					return (
-						<Text
-							size="xs"
-							fw={700}
-							fz={12}
-							pl={12}
-							py={5}
-							children={el.label}
-						/>
-					)
-				}
-				if (el.type === 'element') {
-					if (el.children?.length) {
-						return (
-							<SidebarLink
-								href={el.href}
-								label={el.label}
-								key={i}
-								leftSection={el.leftIcon}
-							>
-								{el.children.map((child, index) => (
-									<SidebarLink
-										href={child.href}
-										label={child.label}
-										key={index}
-										onClick={close}
-									/>
-								))}
-							</SidebarLink>
-						)
-					}
-					return (
-						<SidebarLink
-							href={el.href}
-							label={el.label}
-							onClick={close}
-							key={i}
-						/>
-					)
-				}
-			})}
-		</AppShell.Section>
-	)
+  return (
+    <AppShell.Section component={ScrollArea}>
+      {sidebarElements.map((el, i) => {
+        if (el.type === 'divider') {
+          return <Divider my="md" mx={10} />
+        }
+        if (el.type === 'title') {
+          return (
+            <Text
+              size="xs"
+              fw={700}
+              fz={12}
+              pl={12}
+              py={5}
+              children={el.label}
+            />
+          )
+        }
+        if (el.type === 'element') {
+          if (el.children?.length) {
+            return (
+              <SidebarLink
+                href={el.href}
+                label={el.label}
+                key={i}
+                leftSection={el.leftIcon}
+              >
+                {el.children.map((child, index) => (
+                  <SidebarLink
+                    href={child.href}
+                    label={child.label}
+                    key={index}
+                    onClick={close}
+                  />
+                ))}
+              </SidebarLink>
+            )
+          }
+          return (
+            <SidebarLink
+              href={el.href}
+              label={el.label}
+              onClick={close}
+              key={i}
+            />
+          )
+        }
+      })}
+    </AppShell.Section>
+  )
 }
 
 export default function Sidebar({ close }: SidebarProps): JSX.Element {
-	return (
-		<AppShell.Navbar p="md">
-			<SidebarHeader />
-			<SidebarElements close={close} />
-		</AppShell.Navbar>
-	)
+  return (
+    <AppShell.Navbar p="md">
+      <SidebarHeader />
+      <SidebarElements close={close} />
+    </AppShell.Navbar>
+  )
 }