67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface ResultRowProps {
|
|
children: ReactNode;
|
|
isHighlighted?: boolean;
|
|
}
|
|
|
|
export const ResultRow = ({ children, isHighlighted }: ResultRowProps) => {
|
|
return (
|
|
<Surface
|
|
variant={isHighlighted ? 'muted' : 'dark'}
|
|
rounded="xl"
|
|
padding={3}
|
|
style={isHighlighted ? {
|
|
border: '1px solid var(--ui-color-intent-primary)',
|
|
background: 'linear-gradient(to right, rgba(25, 140, 255, 0.1), transparent)'
|
|
} : {}}
|
|
>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
{children}
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
};
|
|
|
|
export interface PositionBadgeProps {
|
|
position: number;
|
|
}
|
|
|
|
export const PositionBadge = ({ position }: PositionBadgeProps) => {
|
|
const getIntent = (pos: number) => {
|
|
if (pos === 1) return 'warning';
|
|
if (pos === 2) return 'low';
|
|
if (pos === 3) return 'warning';
|
|
return 'low';
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
width={10}
|
|
height={10}
|
|
rounded="lg"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
bg="var(--ui-color-bg-surface-muted)"
|
|
style={{ border: '1px solid var(--ui-color-border-default)' }}
|
|
>
|
|
<Text weight="bold" variant={getIntent(position) as any}>{position}</Text>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export interface ResultPointsProps {
|
|
points: number;
|
|
}
|
|
|
|
export const ResultPoints = ({ points }: ResultPointsProps) => (
|
|
<Box padding={2} rounded="lg" bg="rgba(255, 190, 77, 0.05)" style={{ border: '1px solid rgba(255, 190, 77, 0.2)', minWidth: '3.5rem', textAlign: 'center' }}>
|
|
<Text size="xs" variant="low" block>PTS</Text>
|
|
<Text size="sm" weight="bold" variant="warning">{points}</Text>
|
|
</Box>
|
|
);
|