Add initial project files

2026-09-01 13:03:41 +03:00
parent 22e111bb44
commit 74cb5b6176
1841 changed files with 242819 additions and 30 deletions
@@ -0,0 +1,95 @@
+// DEMO 7
+// https://keenthemes.com/metronic/tailwind/react/demo7
+
+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, useLocation } from 'react-router-dom';
+import { useBodyClass } from '@crux-kit/hooks';
+import { LayoutNames } from '#app/config/types';
+import { useSettings } from '#app/providers/SettingsProvider';
+import { Button } from '#shared/ui/Button';
+import { Calendar } from '#shared/ui/Calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '#shared/ui/Popover';
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
+import { Toolbar, ToolbarActions, ToolbarHeading } from './components/Toolbar';
+
+export const AdvancedMegaMenuLayout = () => {
+  const { setOption } = useSettings();
+  const { pathname } = useLocation();
+
+  const [date, setDate] = useState<DateRange | undefined>({
+    from: new Date(2025, 0, 20),
+    to: addDays(new Date(2025, 0, 20), 20)
+  });
+
+  // Using the custom hook to set multiple CSS variables and class properties
+  useBodyClass(`
+    [--header-height-default:95px]
+    data-[sticky-header=on]:[--header-height:60px]
+    [--header-height:var(--header-height-default)]	
+    [--header-height-mobile:70px]	
+  `);
+
+  useEffect(() => {
+    setOption('layout', LayoutNames.ADVANCE_MEGA_MENU);
+  }, [setOption]);
+
+  return (
+    <>
+      <div className="flex grow flex-col in-data-[sticky-header=on]:pt-(--header-height-default)">
+        <Header />
+
+        <div className="grow" role="content">
+          {!pathname.includes('/public-profile/') && (
+            <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 />
+        </div>
+
+        <Footer />
+      </div>
+    </>
+  );
+};