init

2025-08-20 22:35:40 -05:00
commit f51c278cd3
169 changed files with 8173 additions and 0 deletions
--- a/src/components/sheet/drawer.tsx
+++ b/src/components/sheet/drawer.tsx
@@ -0,0 +1,73 @@
+import { Box, Container } from "@mantine/core";
+import { PropsWithChildren, useEffect } from "react";
+import { Drawer as VaulDrawer } from 'vaul';
+import { useMantineColorScheme } from '@mantine/core';
+import styles from './styles.module.css';
+
+interface DrawerProps extends PropsWithChildren {
+  title?: string;
+  opened: boolean;
+  onChange: (next: boolean) => void;
+}
+
+const Drawer: React.FC<DrawerProps> = ({ title, children, opened, onChange }) => {
+  const { colorScheme } = useMantineColorScheme();
+
+  useEffect(() => {
+    const appElement = document.querySelector('.app') as HTMLElement;
+    
+    if (!appElement) return;
+
+    let themeColorMeta = document.querySelector('meta[name="theme-color"]') as HTMLMetaElement;
+    if (!themeColorMeta) {
+      themeColorMeta = document.createElement('meta');
+      themeColorMeta.name = 'theme-color';
+      document.head.appendChild(themeColorMeta);
+    }
+
+    const colors = {
+      light: {
+        normal: 'rgb(255,255,255)',
+        overlay: 'rgb(153,153,153)'
+      },
+      dark: {
+        normal: 'rgb(36,36,36)',
+        overlay: 'rgb(22,22,22)'
+      }
+    };
+
+    const currentColors = colors[colorScheme] || colors.light;
+    
+    if (opened) {
+      appElement.classList.add('drawer-scaling');
+      themeColorMeta.content = currentColors.overlay;
+    } else {
+      appElement.classList.remove('drawer-scaling');
+      themeColorMeta.content = currentColors.normal;
+    }
+
+    return () => {
+      appElement.classList.remove('drawer-scaling');
+      themeColorMeta.content = currentColors.normal;
+    };
+  }, [opened, colorScheme]);
+
+  return (
+    <VaulDrawer.Root open={opened} onOpenChange={onChange}>
+      <VaulDrawer.Portal>
+        <VaulDrawer.Overlay className={styles.drawerOverlay} />
+        <VaulDrawer.Content className={styles.drawerContent}>
+          <Container flex={1} p='md'>
+            <Box mb='sm' bg='var(--mantine-color-gray-4)' w='3rem' h='0.375rem' ml='auto' mr='auto' style={{ borderRadius: '9999px' }} />
+            <Container mah='fit-content' mx='auto' maw='28rem' px={0}>
+              <VaulDrawer.Title>{title}</VaulDrawer.Title>
+              {children}
+            </Container>
+          </Container>
+        </VaulDrawer.Content>
+      </VaulDrawer.Portal>
+    </VaulDrawer.Root>
+  )
+}
+
+export default Drawer;