41 lines
992 B
TypeScript
41 lines
992 B
TypeScript
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface RaceSidebarPanelProps {
|
|
title: string;
|
|
icon?: LucideIcon;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function RaceSidebarPanel({
|
|
title,
|
|
icon,
|
|
children
|
|
}: RaceSidebarPanelProps) {
|
|
return (
|
|
<Box
|
|
bg="bg-panel-gray"
|
|
rounded="xl"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
overflow="hidden"
|
|
>
|
|
<Box p={4} borderBottom="1px solid" borderColor="border-charcoal-outline" bg="bg-graphite-black/30">
|
|
<Stack direction="row" align="center" gap={2}>
|
|
{icon && <Icon icon={icon} size={4} color="#198CFF" />}
|
|
<Text weight="bold" size="sm" color="text-white" uppercase>
|
|
{title}
|
|
</Text>
|
|
</Stack>
|
|
</Box>
|
|
<Box p={4}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|