egecankomur
101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { IconContext } from "@phosphor-icons/react";
|
|
|
|
import { AppSidebar } from "@/components/app-sidebar";
|
|
import { SiteHeader } from "@/components/site-header";
|
|
import { SiteFooter } from "@/components/site-footer";
|
|
import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";
|
|
import { ThemeCustomizer, ThemeCustomizerTrigger } from "@/components/theme-customizer";
|
|
import { PrefsInitializer } from "@/components/theme-customizer/prefs-initializer";
|
|
import { useSidebarConfig } from "@/hooks/use-sidebar-config";
|
|
import type { ThemePrefs } from "@/lib/appwrite/theme-prefs-actions";
|
|
|
|
export type ShellUser = {
|
|
id: string;
|
|
name: string;
|
|
email: string;
|
|
};
|
|
|
|
export type ShellCompany = {
|
|
id: string;
|
|
name: string;
|
|
logoUrl?: string | null;
|
|
};
|
|
|
|
export function DashboardShell({
|
|
user,
|
|
company,
|
|
children,
|
|
initialPrefs,
|
|
pendingMatchCount = 0,
|
|
}: {
|
|
user: ShellUser;
|
|
company: ShellCompany;
|
|
children: React.ReactNode;
|
|
initialPrefs: ThemePrefs;
|
|
pendingMatchCount?: number;
|
|
}) {
|
|
const [themeCustomizerOpen, setThemeCustomizerOpen] = React.useState(false);
|
|
const { config } = useSidebarConfig();
|
|
|
|
return (
|
|
<IconContext.Provider value={{ weight: "bold" }}>
|
|
<SidebarProvider
|
|
style={
|
|
{
|
|
"--sidebar-width": "16rem",
|
|
"--sidebar-width-icon": "3rem",
|
|
"--header-height": "calc(var(--spacing) * 14)",
|
|
} as React.CSSProperties
|
|
}
|
|
className={config.collapsible === "none" ? "sidebar-none-mode" : ""}
|
|
>
|
|
<PrefsInitializer prefs={initialPrefs} />
|
|
|
|
{config.side === "left" ? (
|
|
<>
|
|
<AppSidebar
|
|
user={user}
|
|
company={company}
|
|
variant={config.variant}
|
|
collapsible={config.collapsible}
|
|
side={config.side}
|
|
pendingMatchCount={pendingMatchCount}
|
|
/>
|
|
<SidebarInset>
|
|
<SiteHeader company={company} />
|
|
<div className="flex flex-1 flex-col min-h-0">{children}</div>
|
|
<SiteFooter />
|
|
</SidebarInset>
|
|
</>
|
|
) : (
|
|
<>
|
|
<SidebarInset>
|
|
<SiteHeader company={company} />
|
|
<div className="flex flex-1 flex-col min-h-0">{children}</div>
|
|
<SiteFooter />
|
|
</SidebarInset>
|
|
<AppSidebar
|
|
user={user}
|
|
company={company}
|
|
variant={config.variant}
|
|
collapsible={config.collapsible}
|
|
side={config.side}
|
|
pendingMatchCount={pendingMatchCount}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<ThemeCustomizerTrigger onClick={() => setThemeCustomizerOpen(true)} />
|
|
<ThemeCustomizer
|
|
open={themeCustomizerOpen}
|
|
onOpenChange={setThemeCustomizerOpen}
|
|
initialPrefs={initialPrefs}
|
|
/>
|
|
</SidebarProvider>
|
|
</IconContext.Provider>
|
|
);
|
|
}
|