55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Check } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
export function FeatureItem({ text }: { text: string }) {
|
|
return (
|
|
<Surface variant="muted" rounded="lg" border padding={4} bg="rgba(15, 23, 42, 0.6)" borderColor="rgba(51, 65, 85, 0.4)">
|
|
<Stack direction="row" align="start" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} bg="rgba(59, 130, 246, 0.1)" border borderColor="rgba(59, 130, 246, 0.3)">
|
|
<Icon icon={Check} size={5} color="#3b82f6" />
|
|
</Surface>
|
|
<Text color="text-slate-200" leading="relaxed" weight="light">
|
|
{text}
|
|
</Text>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|
|
|
|
export function ResultItem({ text, color }: { text: string, color: string }) {
|
|
return (
|
|
<Surface variant="muted" rounded="lg" border padding={4} bg="rgba(15, 23, 42, 0.6)" borderColor="rgba(51, 65, 85, 0.4)">
|
|
<Stack direction="row" align="start" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} bg={`${color}1A`} border borderColor={`${color}4D`}>
|
|
<Icon icon={Check} size={5} color={color} />
|
|
</Surface>
|
|
<Text color="text-slate-200" leading="relaxed" weight="light">
|
|
{text}
|
|
</Text>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|
|
|
|
export function StepItem({ step, text }: { step: number, text: string }) {
|
|
return (
|
|
<Surface variant="muted" rounded="lg" border padding={4} bg="rgba(15, 23, 42, 0.7)" borderColor="rgba(51, 65, 85, 0.5)">
|
|
<Stack direction="row" align="start" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={2} bg="rgba(59, 130, 246, 0.1)" border borderColor="rgba(59, 130, 246, 0.4)" w="10" h="10" display="flex" center>
|
|
<Text weight="bold" size="sm" color="text-primary-blue">{step}</Text>
|
|
</Surface>
|
|
<Text color="text-slate-200" leading="relaxed" weight="light">
|
|
{text}
|
|
</Text>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|