website refactor

apps/website/ui/Icon.tsx

@@ -2,14 +2,29 @@ import React from 'react';
 import { LucideIcon } from 'lucide-react';
 import { Box, BoxProps } from './primitives/Box';
 
-interface IconProps extends Omit<BoxProps<'svg'>, 'children' | 'as'> {
-  icon: LucideIcon;
+export interface IconProps extends Omit<BoxProps<'div'>, 'children'> {
+  icon: LucideIcon | React.ReactNode;
   size?: number | string;
   color?: string;
   strokeWidth?: number;
+  animate?: string;
+  transition?: boolean;
+  groupHoverTextColor?: string;
+  groupHoverScale?: boolean;
 }
 
-export function Icon({ icon: LucideIcon, size = 4, color, className = '', style, ...props }: IconProps) {
+export function Icon({ 
+  icon: IconProp, 
+  size = 4, 
+  color, 
+  className = '', 
+  style, 
+  animate, 
+  transition,
+  groupHoverTextColor,
+  groupHoverScale,
+  ...props 
+}: IconProps) {
   const sizeMap: Record<string | number, string> = {
     3: 'w-3 h-3',
     3.5: 'w-3.5 h-3.5',
@@ -31,13 +46,35 @@ export function Icon({ icon: LucideIcon, size = 4, color, className = '', style,
   const combinedStyle = color && !isTailwindColor ? { color, ...style } : style;
   const boxColor = isTailwindColor ? color : undefined;
 
+  const classes = [
+    sizeClass,
+    animate === 'spin' ? 'animate-spin' : '',
+    transition ? 'transition-all duration-150' : '',
+    groupHoverTextColor ? `group-hover:text-${groupHoverTextColor}` : '',
+    groupHoverScale ? 'group-hover:scale-110 transition-transform' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  const renderIcon = () => {
+    if (!IconProp) return null;
+    if (typeof IconProp === 'function' || (typeof IconProp === 'object' && 'render' in IconProp)) {
+      const LucideIconComponent = IconProp as LucideIcon;
+      return <LucideIconComponent size="100%" strokeWidth={props.strokeWidth} />;
+    }
+    return IconProp;
+  };
+
   return (
     <Box
-      as={LucideIcon}
-      className={`${sizeClass} ${className}`}
+      className={classes}
       style={combinedStyle}
       color={boxColor}
+      display="inline-flex"
+      alignItems="center"
+      justifyContent="center"
       {...props}
-    />
+    >
+      {renderIcon()}
+    </Box>
   );
 }