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