56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface PresetCardProps {
|
|
title: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
onClick: () => void;
|
|
isSelected?: boolean;
|
|
}
|
|
|
|
export const PresetCard = ({
|
|
title,
|
|
description,
|
|
icon,
|
|
onClick,
|
|
isSelected = false
|
|
}: PresetCardProps) => {
|
|
return (
|
|
<Surface
|
|
variant={isSelected ? 'default' : 'muted'}
|
|
rounded="lg"
|
|
padding={4}
|
|
onClick={onClick}
|
|
style={{
|
|
cursor: 'pointer',
|
|
border: isSelected ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)',
|
|
transition: 'all 0.2s ease-in-out'
|
|
}}
|
|
className="group hover:bg-white/5"
|
|
>
|
|
<Box display="flex" alignItems="start" gap={4}>
|
|
<Box
|
|
padding={3}
|
|
rounded="lg"
|
|
bg={isSelected ? 'var(--ui-color-intent-primary)' : 'var(--ui-color-bg-surface-muted)'}
|
|
className="transition-colors"
|
|
>
|
|
<Icon icon={icon} size={6} intent={isSelected ? 'high' : 'low'} />
|
|
</Box>
|
|
<Box>
|
|
<Text weight="bold" variant="high" block marginBottom={1}>
|
|
{title}
|
|
</Text>
|
|
<Text size="sm" variant="low">
|
|
{description}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
};
|