website refactor

2026-01-14 23:31:57 +01:00
parent fbae5e6185
commit c1a86348d7
93 changed files with 7268 additions and 9088 deletions
--- a/apps/website/ui/Stack.tsx
+++ b/apps/website/ui/Stack.tsx
@@ -0,0 +1,95 @@
+import React, { ReactNode, HTMLAttributes } from 'react';
+import { Box } from './Box';
+
+type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
+
+interface StackProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+  className?: string;
+  direction?: 'row' | 'col';
+  gap?: number;
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+  wrap?: boolean;
+  center?: boolean;
+  m?: Spacing;
+  mt?: Spacing;
+  mb?: Spacing;
+  ml?: Spacing;
+  mr?: Spacing;
+  p?: Spacing;
+  pt?: Spacing;
+  pb?: Spacing;
+  pl?: Spacing;
+  pr?: Spacing;
+  px?: Spacing;
+  py?: Spacing;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+}
+
+export function Stack({ 
+  children, 
+  className = '', 
+  direction = 'col',
+  gap = 4,
+  align = 'stretch',
+  justify = 'start',
+  wrap = false,
+  center = false,
+  m, mt, mb, ml, mr,
+  p, pt, pb, pl, pr, px, py,
+  rounded,
+  ...props
+}: StackProps) {
+  const gapClasses: Record<number, string> = {
+    0: 'gap-0',
+    1: 'gap-1',
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    6: 'gap-6',
+    8: 'gap-8',
+    12: 'gap-12'
+  };
+
+  const spacingMap: Record<number, string> = {
+    0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
+    5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
+    16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
+    48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
+  };
+
+  const roundedClasses = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+    full: 'rounded-full'
+  };
+
+  const classes = [
+    'flex',
+    direction === 'col' ? 'flex-col' : 'flex-row',
+    gapClasses[gap] || 'gap-4',
+    center ? 'items-center justify-center' : `items-${align} justify-${justify}`,
+    wrap ? 'flex-wrap' : '',
+    m !== undefined ? `m-${spacingMap[m]}` : '',
+    mt !== undefined ? `mt-${spacingMap[mt]}` : '',
+    mb !== undefined ? `mb-${spacingMap[mb]}` : '',
+    ml !== undefined ? `ml-${spacingMap[ml]}` : '',
+    mr !== undefined ? `mr-${spacingMap[mr]}` : '',
+    p !== undefined ? `p-${spacingMap[p]}` : '',
+    pt !== undefined ? `pt-${spacingMap[pt]}` : '',
+    pb !== undefined ? `pb-${spacingMap[pb]}` : '',
+    pl !== undefined ? `pl-${spacingMap[pl]}` : '',
+    pr !== undefined ? `pr-${spacingMap[pr]}` : '',
+    px !== undefined ? `px-${spacingMap[px]}` : '',
+    py !== undefined ? `py-${spacingMap[py]}` : '',
+    rounded ? roundedClasses[rounded] : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return <Box className={classes} {...props}>{children}</Box>;
+}