react/dashboard.tsx - gemini-react - ivaninvv/dashboard

react/dashboard.tsx
67 строк3 KB
VladimirIvanin
react
30 ноя 2025, 03:42
30 ноя 2025, 03:4245b555a
import React, { useState } from 'react';
import Sidebar from './components/SidebarComp';
import Header from './components/HeaderComp';
import StatsGrid from './components/StatsGrid';
import SalesChart from './components/SalesChart';
import ProductPerformance from './components/ProductPerformance';
import RecentActivity from './components/RecentActivity';

const Dashboard = () => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
      <Sidebar 
        isOpen={isSidebarOpen} 
        onClose={() => setIsSidebarOpen(false)} 
      />
      
      <div className="lg:pl-64 flex flex-col min-h-screen transition-all duration-300">
        <Header onMenuClick={() => setIsSidebarOpen(true)} />
        
        <main className="flex-1 p-6 space-y-6">
          {/* Welcome Banner (Optional, keeping it simple as per NextKit style usually has breadcrumbs or title) */}
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <h1 className="text-2xl font-bold text-slate-900">Good Morning, John!</h1>
              <p className="text-sm text-slate-500">Here's what's happening with your projects today</p>
            </div>
            <div className="flex gap-3">
              <select className="bg-white border border-slate-200 text-slate-600 text-sm rounded-lg p-2.5 focus:ring-blue-500 focus:border-blue-500">
                <option>Last 30 Days</option>
                <option>This Month</option>
                <option>This Year</option>
              </select>
              <button className="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg px-5 py-2.5 text-center shadow-sm transition-colors">
                Add Product
              </button>
            </div>
          </div>

          {/* Stats Grid */}
          <StatsGrid />

          {/* Charts Section */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <SalesChart />
            <div className="lg:col-span-1">
               <RecentActivity />
            </div>
          </div>

          {/* Table Section */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <ProductPerformance />
          </div>
          
          {/* Footer */}
          <footer className="pt-6 text-center text-sm text-slate-500">
            © {new Date().getFullYear()} NextKit Admin Dashboard. All rights reserved.
          </footer>
        </main>
      </div>
    </div>
  );
};

export default Dashboard;