36 lines
1001 B
TypeScript
36 lines
1001 B
TypeScript
import { ChevronRight } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
|
|
export interface SidebarItemProps {
|
|
children: ReactNode;
|
|
onClick?: () => void;
|
|
icon?: ReactNode;
|
|
}
|
|
|
|
export const SidebarItem = ({ children, onClick, icon }: SidebarItemProps) => {
|
|
return (
|
|
<Box
|
|
onClick={onClick}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
padding={2}
|
|
rounded="lg"
|
|
style={{ cursor: onClick ? 'pointer' : 'default', transition: 'background-color 0.2s' }}
|
|
className="hover:bg-[var(--ui-color-bg-surface-muted)]"
|
|
>
|
|
{icon && (
|
|
<Box flexShrink={0} width={10} height={10} bg="var(--ui-color-bg-surface-muted)" rounded="lg" display="flex" alignItems="center" justifyContent="center">
|
|
{icon}
|
|
</Box>
|
|
)}
|
|
<Box flex={1} minWidth="0">
|
|
{children}
|
|
</Box>
|
|
<Icon icon={ChevronRight} size={4} intent="low" />
|
|
</Box>
|
|
);
|
|
};
|