王明 / Food-Labeling-Management-Platform

  import React from 'react';
  import { ChevronRight } from 'lucide-react';
  import { Sidebar } from './Sidebar';
  import { Header } from './Header';

  import type { CurrentUserMenuNodeDto } from '../../types/authSession';

  
  interface LayoutProps {
    children: React.ReactNode;
    currentView: string;
    setCurrentView: (view: string) => void;

    menus?: CurrentUserMenuNodeDto[];
    onLogout?: () => void;

  }
  

  export function Layout({ children, currentView, setCurrentView, menus, onLogout }: LayoutProps) {

    return (
      <div className="flex h-screen bg-gray-50 overflow-hidden font-sans">

        <Sidebar currentView={currentView} setCurrentView={setCurrentView} menus={menus} onLogout={onLogout} />

        <div className="flex-1 flex flex-col min-w-0 overflow-hidden">

          <Header title={currentView} onSettingsClick={() => setCurrentView('Support')} />

          <div className="px-8 mt-8 shrink-0">
            <nav className="flex items-center gap-2 text-sm font-normal" aria-label="Breadcrumb">
              <button
                type="button"
                onClick={() => setCurrentView('Dashboard')}
                className="text-gray-500 hover:text-gray-700 transition-colors"
              >
                Home
              </button>
              <ChevronRight className="w-4 h-4 text-gray-500 shrink-0" />
              <span style={{ color: 'rgb(43, 50, 143)' }}>{currentView}</span>
            </nav>
          </div>

          <main className="min-h-0 flex-1 overflow-y-auto p-8">
            <div className="h-full min-h-0 w-full">

              {children}
            </div>
          </main>
        </div>
      </div>
    );
  }