102 lines
3.5 KiB
TypeScript
Executable File
102 lines
3.5 KiB
TypeScript
Executable File
// DEMO 10
|
|
// https://keenthemes.com/metronic/tailwind/react/demo10
|
|
|
|
import { addDays, format } from 'date-fns';
|
|
import { CalendarDays, Download } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
import { DateRange } from 'react-day-picker';
|
|
import { Link, Outlet } from 'react-router-dom';
|
|
import { useBodyClass, useIsMobile } from '@crux-kit/hooks';
|
|
import { LayoutNames } from '#app/config/types';
|
|
import { Button } from '#shared/ui/Button';
|
|
import { Calendar } from '#shared/ui/Calendar';
|
|
import { Popover, PopoverContent, PopoverTrigger } from '#shared/ui/Popover';
|
|
import { useSettings } from '#providers/SettingsProvider';
|
|
import { Footer } from './components/Footer';
|
|
import { Header } from './components/Header';
|
|
import { Sidebar } from './components/Sidebar';
|
|
import { Toolbar, ToolbarActions, ToolbarHeading } from './components/Toolbar';
|
|
|
|
export const DarkSidebarLayout = () => {
|
|
const { setOption } = useSettings();
|
|
const isMobile = useIsMobile();
|
|
|
|
const [date, setDate] = useState<DateRange | undefined>({
|
|
from: new Date(2025, 0, 20),
|
|
to: addDays(new Date(2025, 0, 20), 20)
|
|
});
|
|
|
|
useBodyClass(`
|
|
[--header-height:60px]
|
|
[--sidebar-width:270px]
|
|
bg-mono! dark:bg-background!
|
|
`);
|
|
|
|
useEffect(() => {
|
|
setOption('layout', LayoutNames.DARK_SIDEBAR);
|
|
}, [setOption]);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex grow">
|
|
{isMobile && <Header />}
|
|
|
|
<div className="flex grow flex-col pt-(--header-height) lg:flex-row lg:pt-0">
|
|
{!isMobile && <Sidebar />}
|
|
|
|
<div className="bg-background border-input flex grow flex-col border lg:ms-(--sidebar-width) lg:rounded-s-xl">
|
|
<div className="kt-scrollable-y-auto flex grow flex-col pt-5 lg:[scrollbar-width:auto]">
|
|
<main className="grow" role="content">
|
|
<Toolbar>
|
|
<ToolbarHeading />
|
|
|
|
<ToolbarActions>
|
|
<Button variant="outline" asChild>
|
|
<Link to={'/account/home/get-started'}>
|
|
<Download />
|
|
Export
|
|
</Link>
|
|
</Button>
|
|
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button id="date" variant="outline">
|
|
<CalendarDays />
|
|
{date?.from ? (
|
|
date.to ? (
|
|
<span>
|
|
{format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
|
|
</span>
|
|
) : (
|
|
format(date.from, 'LLL dd, y')
|
|
)
|
|
) : (
|
|
<span>Pick a date range</span>
|
|
)}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0" align="end">
|
|
<Calendar
|
|
mode="range"
|
|
defaultMonth={date?.from}
|
|
selected={date}
|
|
onSelect={setDate}
|
|
numberOfMonths={2}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</ToolbarActions>
|
|
</Toolbar>
|
|
|
|
<Outlet />
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|