48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect, ReactNode } from "react";
|
|
import Header from "@/components/header/Header";
|
|
import ClientMenu from "@/components/menu/menu";
|
|
import { DashboardLayoutProps } from "./schema";
|
|
import { Language } from "@/components/common/schemas";
|
|
|
|
// Page Content component to wrap the children
|
|
interface PageContentProps {
|
|
children: ReactNode;
|
|
lang: Language;
|
|
}
|
|
|
|
const PageContent: React.FC<PageContentProps> = ({ children, lang }) => {
|
|
return (
|
|
<div className="container mx-auto p-4">
|
|
{React.cloneElement(children as React.ReactElement<any>, { lang })}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
|
|
children,
|
|
lang,
|
|
activePage,
|
|
}) => {
|
|
const [language, setLanguage] = useState<Language>(lang as Language);
|
|
|
|
return (
|
|
<div className="min-h-screen min-w-screen flex h-screen w-screen">
|
|
{/* Sidebar */}
|
|
<aside className="w-1/4 border-r p-4 overflow-y-auto">
|
|
<ClientMenu lang={language} activePage={activePage} />
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="flex flex-col w-3/4 overflow-y-auto">
|
|
{/* Header Component - Either custom or default */}
|
|
<Header lang={language} setLang={setLanguage} />
|
|
{/* Page Content */}
|
|
<PageContent lang={language}>{children}</PageContent>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DashboardLayout;
|