forked from
standard.site/standard.site
Standard.site landing page built in Next.js
Add documentation components
+230
+61
app/components/docs/DocsSidebar.tsx
+61
app/components/docs/DocsSidebar.tsx
···
1
+
'use client'
2
+
3
+
import Link from 'next/link'
4
+
import { usePathname } from 'next/navigation'
5
+
import { ArrowLeftIcon } from 'lucide-react'
6
+
import { AnimateIn, StandardSiteLogo } from '@/app/components'
7
+
import { DOCS_NAV } from '@/app/data/docs-nav'
8
+
9
+
export function DocsSidebar() {
10
+
const pathname = usePathname()
11
+
12
+
return (
13
+
<AnimateIn
14
+
as="aside"
15
+
direction="left"
16
+
delay={0.3}
17
+
onScroll={false}
18
+
className="flex sticky top-8 w-32 shrink-0 flex-col gap-6"
19
+
>
20
+
<Link href="/" className="flex items-center gap-2">
21
+
<StandardSiteLogo className="size-7 text-base-content" />
22
+
<span className="font-medium text-sm tracking-tight text-base-content">Docs</span>
23
+
</Link>
24
+
25
+
<nav className="flex flex-col gap-6">
26
+
{DOCS_NAV.map((section) => (
27
+
<div key={section.title} className="flex flex-col gap-2">
28
+
<span className="font-mono text-xs font-medium tracking-tight text-muted-content uppercase">
29
+
{section.title}
30
+
</span>
31
+
<div className="flex flex-col gap-1">
32
+
{section.items.map((item) => (
33
+
<Link
34
+
key={item.href}
35
+
href={item.href}
36
+
className={`font-medium text-base tracking-tight py-0.5 ${
37
+
pathname === item.href
38
+
? 'text-base-content'
39
+
: 'text-muted-content'
40
+
} hover:text-base-content transition-colors`}
41
+
>
42
+
{item.label}
43
+
</Link>
44
+
))}
45
+
</div>
46
+
</div>
47
+
))}
48
+
</nav>
49
+
50
+
<div className="h-px w-full bg-border" />
51
+
52
+
<Link
53
+
href="/"
54
+
className="flex items-center gap-2 font-medium text-base tracking-tight text-muted-content hover:text-base-content transition-colors"
55
+
>
56
+
<ArrowLeftIcon className="size-4" />
57
+
Back home
58
+
</Link>
59
+
</AnimateIn>
60
+
)
61
+
}
+39
app/components/docs/Table.tsx
+39
app/components/docs/Table.tsx
···
1
+
interface TableProps {
2
+
headers: string[]
3
+
rows: string[][]
4
+
}
5
+
6
+
export function Table({ headers, rows }: TableProps) {
7
+
return (
8
+
<div className="overflow-x-auto mb-6">
9
+
<table className="w-full text-base border-collapse">
10
+
<thead>
11
+
<tr>
12
+
{headers.map((header, i) => (
13
+
<th
14
+
key={i}
15
+
className="text-left font-medium text-base-content border-b border-border px-3 py-2"
16
+
>
17
+
{header}
18
+
</th>
19
+
))}
20
+
</tr>
21
+
</thead>
22
+
<tbody>
23
+
{rows.map((row, i) => (
24
+
<tr key={i}>
25
+
{row.map((cell, j) => (
26
+
<td
27
+
key={j}
28
+
className="text-muted border-b border-border px-3 py-2"
29
+
>
30
+
{cell}
31
+
</td>
32
+
))}
33
+
</tr>
34
+
))}
35
+
</tbody>
36
+
</table>
37
+
</div>
38
+
)
39
+
}
+3
app/components/docs/index.ts
+3
app/components/docs/index.ts