website refactor

apps/website/ui/shell/Shell.tsx

@@ -0,0 +1,101 @@
+import { ReactNode } from 'react';
+import { Box } from '../Box';
+
+// --- Shell Sidebar ---
+
+interface ShellSidebarProps {
+  children: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  collapsed?: boolean;
+  width?: string | number;
+  collapsedWidth?: string | number;
+}
+
+export function ShellSidebar({ 
+  children, 
+  header, 
+  footer, 
+  collapsed = false,
+  width = '16rem',
+  collapsedWidth = '5rem'
+}: ShellSidebarProps) {
+  return (
+    <Box 
+      as="aside"
+      display="flex" 
+      flexDirection="col" 
+      height="full" 
+      className="bg-base-black border-r border-white/10 relative transition-all duration-300 ease-in-out"
+      style={{ width: collapsed ? collapsedWidth : width }}
+    >
+      {header && (
+        <Box p={6} pb={8} display="flex" alignItems="center" justifyContent={collapsed ? 'center' : 'start'}>
+          {header}
+        </Box>
+      )}
+
+      <Box flex={1} px={collapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300">
+        {children}
+      </Box>
+
+      {footer && (
+        <Box className="h-14 flex items-center px-4 border-t border-white/10">
+          {footer}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+// --- Shell Header ---
+
+interface ShellHeaderProps {
+  children: ReactNode;
+  collapsed?: boolean;
+}
+
+export function ShellHeader({ children, collapsed = false }: ShellHeaderProps) {
+  return (
+    <Box
+      as="header"
+      className={`
+        fixed top-0 right-0 z-40
+        h-14
+        bg-base-black/80 backdrop-blur-xl
+        border-b border-white/10
+        flex items-center justify-between px-6
+        transition-all duration-300 ease-in-out
+        left-0 ${collapsed ? 'lg:left-20' : 'lg:left-64'}
+      `}
+    >
+      {children}
+    </Box>
+  );
+}
+
+// --- Shell Footer ---
+
+interface ShellFooterProps {
+  children: ReactNode;
+  collapsed?: boolean;
+}
+
+export function ShellFooter({ children, collapsed = false }: ShellFooterProps) {
+  return (
+    <Box
+      as="footer"
+      className={`
+        fixed bottom-0 right-0 z-40
+        h-14
+        bg-base-black/80 backdrop-blur-xl
+        border-t border-white/10
+        flex items-center justify-between px-6
+        transition-all duration-300 ease-in-out
+        left-0 ${collapsed ? 'lg:left-20' : 'lg:left-64'}
+      `}
+    >
+      {children}
+    </Box>
+  );
+}