jacob-mathison/tuono
1
0
Fork 0
mirror of https://github.com/tuono-labs/tuono synced 2026-07-25 21:02:45 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: documentation meta breadcrumb

Browse Source
This commit is contained in:
Valerio Ageno
2024-11-06 21:09:30 +01:00
parent 3f64f71947
commit d939b64d64
1 changed files with 64 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
+64 -58
View File
@@ -4,87 +4,93 @@ import { Link, Head } from 'tuono'
import { IconChevronRight, IconBolt } from '@tabler/icons-react'
interface Breadcrumb {
href?: string
label: string
href?: string
label: string
}
interface BreadcrumbsProps {
breadcrumbs: Breadcrumb[]
breadcrumbs: Breadcrumb[]
}
export default function TuonoBreadcrumbs({
breadcrumbs = [],
breadcrumbs = [],
}: BreadcrumbsProps): JSX.Element {
return (
<>
<Head>
<script type="application/ld+json">
{`[
return (
<>
<Head>
<script type="application/ld+json">
{`[
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
'@type': "ListItem",
{
"@type": "ListItem",
"position": 1,
"name": "Tuono - The React/Rust fullstack framework",
"item": "https://tuono.dev",
},
{
"@type": "ListItem",
"position": 2,
"name": "Tuono - Documentation",
"item": "https://tuono.dev/documentation",
}${breadcrumbs.length > 0 ? ',' : ''}
${breadcrumbs
.map((br, i) =>
JSON.stringify({
'@type': 'ListItem',
position: i + 2,
name: br.label,
item: br.href ? `https://tuono.dev${br.href}` : undefined,
}),
)
.join(',')}]
.map((br, i) =>
JSON.stringify({
'@type': 'ListItem',
position: i + 3,
name: br.label,
item: br.href ? `https://tuono.dev${br.href}` : undefined,
}),
)
.join(',')}]
}
]`}
</script>
</Head>
<Breadcrumbs
separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
mb="md"
mt="md"
>
<Button
href="/documentation"
component={Link}
variant="subtle"
radius="xl"
p={5}
>
<IconBolt />
</Button>
{breadcrumbs.map((br) => (
<BreadcrumbElement href={br.href} label={br.label} key={br.label} />
))}
</Breadcrumbs>
</>
)
</script>
</Head>
<Breadcrumbs
separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
mb="md"
mt="md"
>
<Button
href="/documentation"
component={Link}
variant="subtle"
radius="xl"
p={5}
>
<IconBolt />
</Button>
{breadcrumbs.map((br) => (
<BreadcrumbElement href={br.href} label={br.label} key={br.label} />
))}
</Breadcrumbs>
</>
)
}
interface BreadcrumbElementProps {
href?: string
label: string
href?: string
label: string
}
export function BreadcrumbElement({
href,
label,
href,
label,
}: BreadcrumbElementProps): JSX.Element {
if (href) {
return (
<Button component={Link} href={href} variant="subtle" radius="xl" px={10}>
{label}
</Button>
)
}
if (href) {
return (
<Button component={Link} href={href} variant="subtle" radius="xl" px={10}>
{label}
</Button>
)
}
return (
<Button component="span" variant="light" radius="xl">
{label}
</Button>
)
return (
<Button component="span" variant="light" radius="xl">
{label}
</Button>
)
}