website refactor

apps/website/ui/IconButton.tsx

@@ -0,0 +1,44 @@
+
+
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Button } from './Button';
+import { Icon } from './Icon';
+
+interface IconButtonProps {
+  icon: LucideIcon;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  title?: string;
+  disabled?: boolean;
+  color?: string;
+}
+
+export function IconButton({
+  icon,
+  onClick,
+  variant = 'secondary',
+  size = 'md',
+  title,
+  disabled,
+  color,
+}: IconButtonProps) {
+  const sizeMap = {
+    sm: { btn: 'w-8 h-8 p-0', icon: 4 },
+    md: { btn: 'w-10 h-10 p-0', icon: 5 },
+    lg: { btn: 'w-12 h-12 p-0', icon: 6 },
+  };
+
+  return (
+    <Button
+      variant={variant}
+      onClick={onClick}
+      title={title}
+      disabled={disabled}
+      className={`${sizeMap[size].btn} rounded-full flex items-center justify-center min-h-0`}
+    >
+      <Icon icon={icon} size={sizeMap[size].icon} color={color} />
+    </Button>
+  );
+}