54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Shield, Info } from 'lucide-react';
|
|
|
|
interface Rule {
|
|
id: string;
|
|
title: string;
|
|
content: string;
|
|
}
|
|
|
|
interface LeagueRulesPanelProps {
|
|
rules: Rule[];
|
|
}
|
|
|
|
export function LeagueRulesPanel({ rules }: LeagueRulesPanelProps) {
|
|
return (
|
|
<Box as="section">
|
|
<Stack gap={8}>
|
|
<Box display="flex" alignItems="start" gap={4} p={4} bg="blue-500/5" border borderColor="blue-500/20">
|
|
<Box color="text-blue-500" mt={0.5}><Info size={20} /></Box>
|
|
<Stack gap={1}>
|
|
<Text size="sm" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">Code of Conduct</Text>
|
|
<Text size="sm" color="text-zinc-400" leading="relaxed">
|
|
All drivers are expected to maintain a high standard of sportsmanship.
|
|
Intentional wrecking or abusive behavior will result in immediate disqualification.
|
|
</Text>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Box display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
|
|
{rules.map((rule) => (
|
|
<Box as="article" key={rule.id} display="flex" flexDirection="col" gap={3} p={6} border borderColor="zinc-800" bg="zinc-900/30">
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Box p={2} bg="zinc-800" color="text-zinc-400">
|
|
<Shield size={18} />
|
|
</Box>
|
|
<Heading level={3} fontSize="md" weight="bold" color="text-white">{rule.title}</Heading>
|
|
</Box>
|
|
<Text size="sm" color="text-zinc-400" leading="relaxed">
|
|
{rule.content}
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|