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