48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface NotFoundHelpLinksProps {
|
|
links: Array<{ label: string; href: string }>;
|
|
}
|
|
|
|
/**
|
|
* NotFoundHelpLinks
|
|
*
|
|
* Semantic component for secondary navigation on the 404 page.
|
|
* Styled as technical metadata links.
|
|
*/
|
|
export function NotFoundHelpLinks({ links }: NotFoundHelpLinksProps) {
|
|
return (
|
|
<Stack direction="row" gap={6} align="center" wrap center>
|
|
{links.map((link, index) => (
|
|
<React.Fragment key={link.href}>
|
|
<Box
|
|
as="a"
|
|
href={link.href}
|
|
transition
|
|
display="inline-block"
|
|
>
|
|
<Text
|
|
color="text-gray-400"
|
|
hoverTextColor="primary-accent"
|
|
weight="medium"
|
|
size="xs"
|
|
letterSpacing="widest"
|
|
uppercase
|
|
>
|
|
{link.label}
|
|
</Text>
|
|
</Box>
|
|
{index < links.length - 1 && (
|
|
<Box width="1px" height="12px" bg="border-gray" opacity={0.5} />
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</Stack>
|
|
);
|
|
}
|