website refactor

apps/website/ui/IconButton.tsx

@@ -1,54 +1,31 @@
-import React from 'react';
-import { LucideIcon } from 'lucide-react';
-import { Button } from './Button';
+import React, { MouseEventHandler } from 'react';
+import { Button, ButtonProps } from './Button';
 import { Icon } from './Icon';
 
-interface IconButtonProps {
-  icon: LucideIcon;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
+export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'icon'> {
+  icon: any;
   title?: string;
-  disabled?: boolean;
-  color?: string;
-  className?: string;
-  backgroundColor?: string;
 }
 
-export function IconButton({
-  icon,
-  onClick,
-  variant = 'secondary',
-  size = 'md',
+export const IconButton = ({ 
+  icon, 
   title,
-  disabled,
-  color,
-  className = '',
-  backgroundColor,
-}: IconButtonProps) {
-  const sizeMap = {
-    sm: { w: '8', h: '8', icon: 4 },
-    md: { w: '10', h: '10', icon: 5 },
-    lg: { w: '12', h: '12', icon: 6 },
-  };
+  size = 'md',
+  ...props 
+}: IconButtonProps) => {
+  const iconSizeMap = {
+    sm: 3,
+    md: 4,
+    lg: 5
+  } as const;
 
   return (
-    <Button
-      variant={variant}
-      onClick={onClick}
-      title={title}
-      disabled={disabled}
-      w={sizeMap[size].w}
-      h={sizeMap[size].h}
-      p={0}
-      rounded="full"
-      display="flex"
-      center
-      minHeight="0"
-      className={className}
-      backgroundColor={backgroundColor}
+    <Button 
+      size={size}
+      {...props}
     >
-      <Icon icon={icon} size={sizeMap[size].icon} color={color} />
+      <Icon icon={icon} size={iconSizeMap[size]} />
+      {title && <span className="sr-only">{title}</span>}
     </Button>
   );
-}
+};