52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
|
|
|
|
import { ChevronRight, LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Link } from './Link';
|
|
import { Text } from './Text';
|
|
|
|
interface QuickActionItemProps {
|
|
href: string;
|
|
label: string;
|
|
icon: LucideIcon;
|
|
iconVariant?: 'blue' | 'amber' | 'purple' | 'green';
|
|
}
|
|
|
|
export function QuickActionItem({ href, label, icon, iconVariant = 'blue' }: QuickActionItemProps) {
|
|
const variantColors = {
|
|
blue: 'rgb(59, 130, 246)',
|
|
amber: 'rgb(245, 158, 11)',
|
|
purple: 'rgb(168, 85, 247)',
|
|
green: 'rgb(16, 185, 129)',
|
|
};
|
|
|
|
const variantBgs = {
|
|
blue: 'bg-primary-blue/10',
|
|
amber: 'bg-warning-amber/10',
|
|
purple: 'bg-purple-500/10',
|
|
green: 'bg-performance-green/10',
|
|
};
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
block
|
|
p={3}
|
|
rounded="lg"
|
|
bg="bg-deep-graphite"
|
|
hoverBorderColor="charcoal-outline/50"
|
|
transition
|
|
className="hover:bg-charcoal-outline/50"
|
|
>
|
|
<Box display="flex" alignItems="center" gap={3} fullWidth>
|
|
<Box p={2} bg={variantBgs[iconVariant]} rounded="lg">
|
|
<Icon icon={icon} size={4} color={variantColors[iconVariant]} />
|
|
</Box>
|
|
<Text size="sm" color="text-white" weight="medium">{label}</Text>
|
|
<Icon icon={ChevronRight} size={4} color="rgb(107, 114, 128)" ml="auto" />
|
|
</Box>
|
|
</Link>
|
|
);
|
|
}
|