61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Plus, Search, Shield, Users } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Container } from '@/ui/Container';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
/**
|
|
* QuickLinksPanel - Semantic quick actions bar.
|
|
* Replaces HomeQuickActions with a more semantic implementation.
|
|
*/
|
|
export function QuickLinksPanel() {
|
|
const links = [
|
|
{ label: 'Find League', icon: Search, href: routes.public.leagues },
|
|
{ label: 'Join Team', icon: Users, href: routes.public.teams },
|
|
{ label: 'Create Race', icon: Plus, href: routes.protected.dashboard },
|
|
{ label: 'Rulebooks', icon: Shield, href: '#' },
|
|
];
|
|
|
|
return (
|
|
<Box as="nav" bg="panel-gray/50" py={8} borderBottom borderColor="border-gray/30">
|
|
<Container>
|
|
<Box display="flex" flexWrap="wrap" justifyContent="center" gap={4}>
|
|
{links.map((link) => (
|
|
<Button
|
|
key={link.label}
|
|
as="a"
|
|
href={link.href}
|
|
variant="secondary"
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
px={6}
|
|
bg="graphite-black"
|
|
borderColor="border-gray/50"
|
|
hoverBorderColor="primary-accent/50"
|
|
transition
|
|
group
|
|
>
|
|
<Icon
|
|
icon={link.icon}
|
|
size={4}
|
|
color="text-gray-500"
|
|
groupHoverTextColor="primary-accent"
|
|
transition
|
|
/>
|
|
<Text size="xs" weight="bold" uppercase letterSpacing="widest">
|
|
{link.label}
|
|
</Text>
|
|
</Button>
|
|
))}
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|