161 lines
8.2 KiB
JavaScript
161 lines
8.2 KiB
JavaScript
// app/badge/page.tsx
|
|
'use client'
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Head from 'next/head';
|
|
import Preloader from "../../components/partials/preloaders";
|
|
// import Sidebar from '@/components/partials/Sidebar';
|
|
import Overlay from "../../components/partials/overlay";
|
|
import Header from "../../components/partials/header";
|
|
import Breadcrumb from "../../components/partials/breadcrumb";
|
|
import Badge01 from "../../components/partials/badge/Badge01";
|
|
import Badge02 from "../../components/partials/badge/Badge02";
|
|
import Badge03 from "../../components/partials/badge/Badge03";
|
|
import Badge04 from "../../components/partials/badge/Badge04";
|
|
import Badge05 from "../../components/partials/badge/Badge05";
|
|
import Badge06 from "../../components/partials/badge/Badge06";
|
|
|
|
export default function BadgePage() {
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [darkMode, setDarkMode] = useState(false);
|
|
const [stickyMenu, setStickyMenu] = useState(false);
|
|
const [sidebarToggle, setSidebarToggle] = useState(false);
|
|
const [scrollTop, setScrollTop] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Load dark mode preference from localStorage
|
|
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
|
|
setDarkMode(savedDarkMode);
|
|
|
|
// Simulate loading
|
|
const timer = setTimeout(() => {
|
|
setLoaded(true);
|
|
}, 500);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// Save dark mode preference to localStorage
|
|
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
|
}, [darkMode]);
|
|
|
|
const pageName = 'Badge';
|
|
|
|
return (
|
|
<>
|
|
|
|
<div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
|
|
{/* Preloader */}
|
|
{!loaded && <Preloader />}
|
|
|
|
{/* Page Wrapper */}
|
|
<div className="flex h-screen overflow-hidden">
|
|
{/* Sidebar */}
|
|
{/* <Sidebar
|
|
activePage="badge"
|
|
darkMode={darkMode}
|
|
sidebarToggle={sidebarToggle}
|
|
setSidebarToggle={setSidebarToggle}
|
|
/> */}
|
|
|
|
{/* Content Area */}
|
|
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
|
|
{/* Small Device Overlay */}
|
|
<Overlay
|
|
sidebarToggle={sidebarToggle}
|
|
setSidebarToggle={setSidebarToggle}
|
|
/>
|
|
|
|
{/* 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="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
|
|
{/* Breadcrumb */}
|
|
<Breadcrumb pageName={pageName} />
|
|
|
|
<div className="space-y-5 sm:space-y-6">
|
|
{/* With Light Background */}
|
|
<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">
|
|
With Light Background
|
|
</h3>
|
|
</div>
|
|
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
|
<Badge01 />
|
|
</div>
|
|
</div>
|
|
|
|
{/* With Solid Background */}
|
|
<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">
|
|
With Solid Background
|
|
</h3>
|
|
</div>
|
|
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
|
<Badge02 />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Light Background with Left Icon */}
|
|
<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">
|
|
Light Background with Left Icon
|
|
</h3>
|
|
</div>
|
|
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
|
<Badge03 />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Solid Background with Left Icon */}
|
|
<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">
|
|
Solid Background with Left Icon
|
|
</h3>
|
|
</div>
|
|
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
|
<Badge04 />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Light Background with Right Icon */}
|
|
<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">
|
|
Light Background with Right Icon
|
|
</h3>
|
|
</div>
|
|
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
|
<Badge05 />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Solid Background with Right Icon */}
|
|
<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">
|
|
Solid Background with Right Icon
|
|
</h3>
|
|
</div>
|
|
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
|
|
<Badge06 />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
} |