47 lines
2.2 KiB
TypeScript
47 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
export function FeatureItem({ text }: { text: string }) {
|
|
return (
|
|
<Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/10" borderColor="border-gray/10" className="group hover:border-primary-accent/20 transition-colors">
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Box w="0.5" h="3" bg="primary-accent" className="group-hover:h-5 transition-all" />
|
|
<Text color="text-gray-500" leading="relaxed" weight="normal" size="sm" className="tracking-wide group-hover:text-gray-300 transition-colors">
|
|
{text}
|
|
</Text>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|
|
|
|
export function ResultItem({ text, color }: { text: string, color: string }) {
|
|
return (
|
|
<Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/10" borderColor="border-gray/10" className="group hover:border-primary-accent/20 transition-colors">
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Box w="0.5" h="3" style={{ backgroundColor: color }} className="group-hover:h-5 transition-all" />
|
|
<Text color="text-gray-500" leading="relaxed" weight="normal" size="sm" className="tracking-wide group-hover:text-gray-300 transition-colors">
|
|
{text}
|
|
</Text>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|
|
|
|
export function StepItem({ step, text }: { step: number, text: string }) {
|
|
return (
|
|
<Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/10" borderColor="border-gray/10" className="group hover:border-primary-accent/20 transition-colors">
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Box w="6" h="6" display="flex" center border borderColor="border-gray/20" className="group-hover:border-primary-accent/30 transition-colors">
|
|
<Text weight="bold" size="xs" color="text-primary-accent" font="mono" opacity={0.7}>{step.toString().padStart(2, '0')}</Text>
|
|
</Box>
|
|
<Text color="text-gray-500" leading="relaxed" weight="normal" size="sm" className="tracking-wide group-hover:text-gray-300 transition-colors">
|
|
{text}
|
|
</Text>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|