77 lines
2.9 KiB
JavaScript
77 lines
2.9 KiB
JavaScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import Head from 'next/head';
|
|
import dynamic from 'next/dynamic';
|
|
import Preloader from "../../components/partials/preloaders";
|
|
// import Sidebar from '../partials/sidebar';
|
|
import Overlay from "../../components/partials/overlay";
|
|
import Header from "../../components/partials/header";
|
|
import Breadcrumb from "../../components/partials/breadcrumb";
|
|
|
|
// Dynamically import the chart component with SSR disabled
|
|
const ChartOne = dynamic(
|
|
() => import("../../components/charts/chart-01"),
|
|
{ ssr: false }
|
|
);
|
|
|
|
export default function BarChartPage() {
|
|
const [darkMode, setDarkMode] = useState(false);
|
|
const [loaded, setLoaded] = useState(true);
|
|
|
|
// Initialize dark mode from localStorage
|
|
useEffect(() => {
|
|
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
|
|
if (savedDarkMode !== null) {
|
|
setDarkMode(savedDarkMode);
|
|
}
|
|
setLoaded(true); // Simulate loading completion
|
|
}, []);
|
|
|
|
// Save dark mode preference when it changes
|
|
useEffect(() => {
|
|
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
|
}, [darkMode]);
|
|
|
|
return (
|
|
<div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : ''}`}>
|
|
{/* Preloader */}
|
|
{!loaded && <Preloader />}
|
|
|
|
{/* Sidebar */}
|
|
{/* <Sidebar /> */}
|
|
|
|
{/* Content Area */}
|
|
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
|
|
{/* Small Device Overlay */}
|
|
<Overlay />
|
|
|
|
{/* Header */}
|
|
<div darkMode={darkMode} setDarkMode={setDarkMode} className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
|
|
<Header />
|
|
</div>
|
|
{/* Main Content */}
|
|
<main>
|
|
<div className="p-4 mx-auto max-w-screen-2xl md:p-6">
|
|
{/* Breadcrumb */}
|
|
<Breadcrumb pageName="Bar Chart" />
|
|
|
|
<div className="space-y-6">
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Bar Chart 1
|
|
</h3>
|
|
</div>
|
|
<div className="p-5 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
{/* Chart One Component */}
|
|
<ChartOne />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |