website refactor

apps/website/ui/Skeleton.tsx

@@ -1,23 +1,44 @@
 import React from 'react';
 import { Box } from './primitives/Box';
 
-interface SkeletonProps {
+export interface SkeletonProps {
   width?: string | number;
   height?: string | number;
-  circle?: boolean;
-  className?: string;
+  variant?: 'text' | 'circular' | 'rectangular';
+  animation?: 'pulse' | 'wave' | 'none';
 }
 
-export function Skeleton({ width, height, circle, className = '' }: SkeletonProps) {
+export const Skeleton = ({ 
+  width, 
+  height, 
+  variant = 'rectangular',
+  animation = 'pulse' 
+}: SkeletonProps) => {
+  const variantClasses = {
+    text: 'rounded-sm',
+    circular: 'rounded-full',
+    rectangular: 'rounded-none',
+  };
+
+  const animationClasses = {
+    pulse: 'animate-pulse',
+    wave: 'animate-shimmer', // Assuming shimmer is defined
+    none: '',
+  };
+
+  const classes = [
+    'bg-[var(--ui-color-bg-surface-muted)]',
+    variantClasses[variant],
+    animationClasses[animation],
+  ].join(' ');
+
   return (
     <Box 
-      w={width}
-      h={height}
-      rounded={circle ? 'full' : 'md'}
-      bg="bg-white/5"
-      className={`animate-pulse ${className}`} 
+      width={width} 
+      height={height} 
+      className={classes}
       role="status"
       aria-label="Loading..."
     />
   );
-}
+};