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