website refactor

apps/website/ui/IconButton.tsx

@@ -1,5 +1,3 @@
-
-
 import React from 'react';
 import { LucideIcon } from 'lucide-react';
 import { Button } from './Button';
@@ -29,9 +27,9 @@ export function IconButton({
   backgroundColor,
 }: 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 },
+    sm: { w: '8', h: '8', icon: 4 },
+    md: { w: '10', h: '10', icon: 5 },
+    lg: { w: '12', h: '12', icon: 6 },
   };
 
   return (
@@ -40,7 +38,14 @@ export function IconButton({
       onClick={onClick}
       title={title}
       disabled={disabled}
-      className={`${sizeMap[size].btn} rounded-full flex items-center justify-center min-h-0 ${className}`}
+      w={sizeMap[size].w}
+      h={sizeMap[size].h}
+      p={0}
+      rounded="full"
+      display="flex"
+      center
+      minHeight="0"
+      className={className}
       backgroundColor={backgroundColor}
     >
       <Icon icon={icon} size={sizeMap[size].icon} color={color} />