44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { ArrowRight, LucideIcon } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Link } from './Link';
|
|
import { Text } from './Text';
|
|
|
|
export interface QuickActionLinkProps {
|
|
label?: string;
|
|
icon?: LucideIcon;
|
|
href: string;
|
|
children?: React.ReactNode;
|
|
variant?: string;
|
|
}
|
|
|
|
export const QuickActionLink = ({
|
|
label,
|
|
icon,
|
|
href,
|
|
children,
|
|
variant
|
|
}: QuickActionLinkProps) => {
|
|
return (
|
|
<Link href={href} underline="none">
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
paddingY={2}
|
|
className="group"
|
|
>
|
|
{children ? children : (
|
|
<>
|
|
{icon && <Icon icon={icon} size={4} intent="low" className="group-hover:text-[var(--ui-color-intent-primary)] transition-colors" />}
|
|
<Text size="sm" variant="med" className="group-hover:text-[var(--ui-color-text-high)] transition-colors">
|
|
{label}
|
|
</Text>
|
|
<Icon icon={ArrowRight} size={3} intent="low" className="opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all" />
|
|
</>
|
|
)}
|
|
</Box>
|
|
</Link>
|
|
);
|
|
};
|