59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import { ChevronRight, LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Link } from './Link';
|
|
import { Text } from './Text';
|
|
|
|
export interface QuickActionItemProps {
|
|
label: string;
|
|
icon: LucideIcon;
|
|
href: string;
|
|
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical';
|
|
}
|
|
|
|
export const QuickActionItem = ({
|
|
label,
|
|
icon,
|
|
href,
|
|
variant = 'primary'
|
|
}: QuickActionItemProps) => {
|
|
const variantBgs = {
|
|
primary: 'rgba(25, 140, 255, 0.1)',
|
|
secondary: 'var(--ui-color-bg-surface-muted)',
|
|
success: 'rgba(111, 227, 122, 0.1)',
|
|
warning: 'rgba(255, 190, 77, 0.1)',
|
|
critical: 'rgba(227, 92, 92, 0.1)',
|
|
};
|
|
|
|
const variantIntents = {
|
|
primary: 'primary' as const,
|
|
secondary: 'med' as const,
|
|
success: 'success' as const,
|
|
warning: 'warning' as const,
|
|
critical: 'critical' as const,
|
|
};
|
|
|
|
return (
|
|
<Link href={href} underline="none">
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={4}
|
|
padding={4}
|
|
rounded="lg"
|
|
bg="var(--ui-color-bg-surface)"
|
|
style={{ border: '1px solid var(--ui-color-border-default)' }}
|
|
className="group hover:bg-white/5 transition-colors"
|
|
>
|
|
<Box padding={2} bg={variantBgs[variant]} rounded="lg">
|
|
<Icon icon={icon} size={5} intent={variantIntents[variant] as any} />
|
|
</Box>
|
|
<Text weight="medium" variant="high" flexGrow={1}>
|
|
{label}
|
|
</Text>
|
|
<Icon icon={ChevronRight} size={4} intent="low" />
|
|
</Box>
|
|
</Link>
|
|
);
|
|
};
|