gitscope
← marzneshin / v0.3.0-alpha7 / dashboard/src/components/sidebar/sidebar.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/sidebar/sidebar.tsx · TypeScript
Blame Raw
 1import { FC, PropsWithChildren } from "react";
 2import { SidebarContext } from "./sidebar-provider"
 3import { SidebarItemGroup } from "./types"
 4import { VariantProps, cva } from "class-variance-authority"
 5import { cn } from "@marzneshin/utils";
 6import { SidebarHeader } from "./sidebar-header";
 7import { SidebarFooter } from "./sidebar-footer";
 8import { SidebarBody } from "./sidebar-body";
 9import { SidebarItem } from "./sidebar-item";
10import { SidebarGroup } from "./sidebar-group";
11
12const sidebarVariants = cva("flex flex-col justify-between h-full w-full", {
13    variants: {
14        variant: {
15            default: ""
16        }
17    }
18});
19
20interface ContentComposition {
21    Header: typeof SidebarHeader;
22    Footer: typeof SidebarFooter;
23    Body: typeof SidebarBody;
24    Group: typeof SidebarGroup;
25    Item: typeof SidebarItem;
26}
27
28export interface SidebarProps
29    extends React.HTMLAttributes<HTMLDivElement>,
30    VariantProps<typeof sidebarVariants> {
31    sidebar: SidebarItemGroup;
32    collapsed: boolean;
33    setCollapsed: (state: boolean) => void;
34}
35
36const Sidebar: FC<SidebarProps & PropsWithChildren> & ContentComposition =
37    ({ collapsed, setCollapsed, sidebar, variant, className, children, ...props }) => {
38        return (
39            <SidebarContext.Provider value={{ sidebar, collapsed, setCollapsed }} >
40                <div className={cn(sidebarVariants({ variant, className }))} {...props}>
41                    {children}
42                </div>
43            </SidebarContext.Provider>
44        )
45    }
46
47Sidebar.Header = SidebarHeader;
48Sidebar.Footer = SidebarFooter;
49Sidebar.Body = SidebarBody;
50Sidebar.Item = SidebarItem;
51Sidebar.Group = SidebarGroup;
52Sidebar.displayName = "Sidebar"
53
54export { Sidebar, sidebarVariants }