60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
|
|
interface HomeFeatureDescriptionProps {
|
|
lead: string;
|
|
items: string[];
|
|
quote?: string;
|
|
accentColor?: 'primary' | 'aqua' | 'amber' | 'gray';
|
|
}
|
|
|
|
/**
|
|
* HomeFeatureDescription - A semantic component for feature descriptions on the home page.
|
|
* Refactored to use semantic HTML and Tailwind.
|
|
*/
|
|
export function HomeFeatureDescription({
|
|
lead,
|
|
items,
|
|
quote,
|
|
accentColor = 'primary',
|
|
}: HomeFeatureDescriptionProps) {
|
|
const borderColor = {
|
|
primary: 'primary-accent',
|
|
aqua: 'telemetry-aqua',
|
|
amber: 'warning-amber',
|
|
gray: 'border-gray',
|
|
}[accentColor];
|
|
|
|
const bgColor = {
|
|
primary: 'primary-accent/5',
|
|
aqua: 'telemetry-aqua/5',
|
|
amber: 'warning-amber/5',
|
|
gray: 'white/5',
|
|
}[accentColor];
|
|
|
|
return (
|
|
<Stack gap={6}>
|
|
<Text size="lg" color="text-gray-400" weight="medium" leading="relaxed">
|
|
{lead}
|
|
</Text>
|
|
<Stack as="ul" gap={2}>
|
|
{items.map((item, index) => (
|
|
<Stack as="li" key={index} direction="row" align="start" gap={2}>
|
|
<Text color="text-primary-accent">•</Text>
|
|
<Text size="sm" color="text-gray-500">{item}</Text>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
{quote && (
|
|
<Stack borderLeft borderStyle="solid" borderWidth="2px" borderColor={borderColor} pl={4} py={1} bg={bgColor}>
|
|
<Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest" leading="relaxed">
|
|
{quote}
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|