66 lines
1.5 KiB
TypeScript
66 lines
1.5 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 SidebarActionLinkProps {
|
|
label: string;
|
|
icon: LucideIcon;
|
|
href: string;
|
|
isActive?: boolean;
|
|
}
|
|
|
|
export const SidebarActionLink = ({
|
|
label,
|
|
icon,
|
|
href,
|
|
isActive = false
|
|
}: SidebarActionLinkProps) => {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
variant="ghost"
|
|
underline="none"
|
|
>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
padding={3}
|
|
rounded="lg"
|
|
bg={isActive ? 'var(--ui-color-bg-surface-muted)' : 'transparent'}
|
|
className="group hover:bg-white/5 transition-colors"
|
|
>
|
|
<Box
|
|
padding={2}
|
|
rounded="md"
|
|
bg={isActive ? 'var(--ui-color-intent-primary)' : 'var(--ui-color-bg-surface-muted)'}
|
|
display="flex"
|
|
center
|
|
>
|
|
<Icon
|
|
icon={icon}
|
|
size={4}
|
|
intent={isActive ? 'high' : 'low'}
|
|
/>
|
|
</Box>
|
|
<Text
|
|
size="sm"
|
|
variant={isActive ? 'high' : 'med'}
|
|
weight={isActive ? 'bold' : 'medium'}
|
|
flexGrow={1}
|
|
>
|
|
{label}
|
|
</Text>
|
|
<Icon
|
|
icon={ChevronRight}
|
|
size={4}
|
|
intent="low"
|
|
className="opacity-0 group-hover:opacity-100 transition-opacity"
|
|
/>
|
|
</Box>
|
|
</Link>
|
|
);
|
|
};
|