1
 2import { Link } from '@tanstack/react-router'
 3import { FC } from 'react'
 4import { SidebarItem as SidebarItemType } from './types'
 5import { cn } from '@marzneshin/utils';
 6import { VariantProps, cva } from 'class-variance-authority';
 7import { useSidebarContext } from './sidebar-provider';
 8
 9const sidebarItemVariants = cva("w-full rounded-lg border p-2", {
10    variants: {
11        variant: {
12            default: "bg-primary-foreground text-primary hover:bg-accent",
13            active: "bg-primary text-primary-foreground"
14        },
15        size: {
16            default: "",
17            collapsed: ""
18        }
19    }
20});
21
22
23export interface SidebarItemProps extends
24    React.HTMLAttributes<HTMLLinkElement>,
25    VariantProps<typeof sidebarItemVariants> {
26    item: SidebarItemType;
27}
28
29export const SidebarItem: FC<SidebarItemProps> = ({ item, className, variant }) => {
30    const { collapsed } = useSidebarContext();
31    return (
32        <li key={item.title} className={cn(sidebarItemVariants({ variant, className }))}>
33            <Link to={item.to} className={cn("flex flex-row items-center justify-center", { "-justify-center gap-2": !collapsed })}>
34                {item.icon}{!collapsed && item.title}
35            </Link>
36        </li>
37    )
38}