38 lines
1012 B
TypeScript
38 lines
1012 B
TypeScript
import React from 'react';
|
|
import { ChevronRight, LucideIcon } from 'lucide-react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
import { Link } from './Link';
|
|
|
|
interface SidebarActionLinkProps {
|
|
href: string;
|
|
icon: LucideIcon;
|
|
label: string;
|
|
iconColor?: string;
|
|
iconBgColor?: string;
|
|
}
|
|
|
|
export function SidebarActionLink({
|
|
href,
|
|
icon,
|
|
label,
|
|
iconColor = 'text-primary-blue',
|
|
iconBgColor = 'bg-primary-blue/10',
|
|
}: SidebarActionLinkProps) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
variant="ghost"
|
|
block
|
|
className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-iron-gray/50 transition-all"
|
|
>
|
|
<Box p={2} className={iconBgColor} rounded="lg" display="flex" center>
|
|
<Icon icon={icon} size={4} className={iconColor} />
|
|
</Box>
|
|
<Text size="sm" color="text-white" flexGrow={1}>{label}</Text>
|
|
<Icon icon={ChevronRight} size={4} color="text-gray-500" />
|
|
</Link>
|
|
);
|
|
}
|