website refactor

apps/website/ui/Heading.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, ElementType } from 'react';
 import { Stack } from './primitives/Stack';
-import { Box, BoxProps } from './primitives/Box';
+import { Box, BoxProps, ResponsiveValue } from './primitives/Box';
 
 interface ResponsiveFontSize {
   base?: string;
@@ -18,11 +18,13 @@ interface HeadingProps extends Omit<BoxProps<'h1'>, 'children' | 'as' | 'fontSiz
   id?: string;
   groupHoverColor?: string;
   truncate?: boolean;
+  uppercase?: boolean;
   fontSize?: string | ResponsiveFontSize;
-  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | string;
+  letterSpacing?: string;
 }
 
-export function Heading({ level, children, icon, groupHoverColor, truncate, fontSize, weight, ...props }: HeadingProps) {
+export function Heading({ level, children, icon, groupHoverColor, truncate, uppercase, fontSize, weight, letterSpacing, ...props }: HeadingProps) {
   const Tag = `h${level}` as ElementType;
   
   const levelClasses = {
@@ -34,7 +36,7 @@ export function Heading({ level, children, icon, groupHoverColor, truncate, font
     6: 'text-xs font-bold text-white tracking-tight uppercase tracking-widest',
   };
 
-  const weightClasses = {
+  const weightClasses: Record<string, string> = {
     light: 'font-light',
     normal: 'font-normal',
     medium: 'font-medium',
@@ -67,14 +69,24 @@ export function Heading({ level, children, icon, groupHoverColor, truncate, font
   const classes = [
     levelClasses[level],
     getFontSizeClasses(fontSize),
-    weight ? weightClasses[weight] : '',
+    weight && weightClasses[weight as keyof typeof weightClasses] ? weightClasses[weight as keyof typeof weightClasses] : '',
+    letterSpacing ? `tracking-${letterSpacing}` : '',
+    uppercase ? 'uppercase' : '',
     groupHoverColor ? `group-hover:text-${groupHoverColor}` : '',
     truncate ? 'truncate' : '',
     props.className
   ].filter(Boolean).join(' ');
 
   return (
-    <Box as={Tag} {...props} className={classes}>
+    <Box 
+      as={Tag} 
+      {...props} 
+      className={classes}
+      style={{
+        ...(weight && !weightClasses[weight as keyof typeof weightClasses] ? { fontWeight: weight } : {}),
+        ...(props.style || {})
+      }}
+    >
       {content}
     </Box>
   );