53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
|
|
export interface RaceRowCellProps {
|
|
children: ReactNode;
|
|
label?: string;
|
|
width?: string | number;
|
|
align?: 'left' | 'center' | 'right';
|
|
hideOnMobile?: boolean;
|
|
}
|
|
|
|
export const RaceRowCell = ({
|
|
children,
|
|
label,
|
|
width,
|
|
align = 'left',
|
|
hideOnMobile = false
|
|
}: RaceRowCellProps) => {
|
|
const alignmentClasses = {
|
|
left: 'items-start text-left',
|
|
center: 'items-center text-center',
|
|
right: 'items-end text-right'
|
|
}[align];
|
|
|
|
return (
|
|
<Box
|
|
display={hideOnMobile ? { base: 'none', md: 'flex' } : 'flex'}
|
|
flexDirection="col"
|
|
width={width}
|
|
flexShrink={width ? 0 : 1}
|
|
minWidth="0"
|
|
className={alignmentClasses}
|
|
>
|
|
{label && (
|
|
<Text
|
|
size="xs"
|
|
variant="low"
|
|
uppercase
|
|
weight="bold"
|
|
letterSpacing="widest"
|
|
marginBottom={0.5}
|
|
>
|
|
{label}
|
|
</Text>
|
|
)}
|
|
<Box display="flex" alignItems="center" gap={2} minWidth="0" justifyContent={align === 'right' ? 'end' : (align === 'center' ? 'center' : 'start')}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|