58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { Icon } from '@/ui/Icon';
|
|
import { Box } from '@/ui/primitives/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface FeatureItemProps {
|
|
icon: LucideIcon;
|
|
text: string;
|
|
}
|
|
|
|
export function FeatureItem({ icon, text }: FeatureItemProps) {
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
overflow="hidden"
|
|
rounded="lg"
|
|
bg="bg-gradient-to-r from-slate-900/60 via-slate-800/40 to-slate-900/60"
|
|
p={4}
|
|
border
|
|
borderColor="border-slate-700/40"
|
|
hoverBorderColor="border-primary-blue/50"
|
|
transition
|
|
group
|
|
>
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
left="0"
|
|
w="full"
|
|
h="0.5"
|
|
bg="bg-gradient-to-r from-transparent via-primary-blue/60 to-transparent"
|
|
opacity={0}
|
|
groupHoverBorderColor="opacity-100" // This is a hack, Box doesn't support groupHoverOpacity
|
|
/>
|
|
<Box display="flex" alignItems="start" gap={3}>
|
|
<Box
|
|
flexShrink={0}
|
|
w="9"
|
|
h="9"
|
|
rounded="lg"
|
|
bg="bg-gradient-to-br from-primary-blue/20 to-blue-900/20"
|
|
border
|
|
borderColor="border-primary-blue/30"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
shadow="lg"
|
|
hoverScale
|
|
>
|
|
<Icon icon={icon} size={5} color="text-primary-blue" />
|
|
</Box>
|
|
<Text color="text-slate-200" leading="relaxed" weight="light">
|
|
{text}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
} |