website refactor

apps/website/ui/IconContainer.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+
+interface IconContainerProps {
+  children: ReactNode;
+  variant?: 'default' | 'primary' | 'telemetry' | 'warning';
+}
+
+/**
+ * IconContainer - A semantic UI component for wrapping icons.
+ */
+export function IconContainer({ children, variant = 'default' }: IconContainerProps) {
+  const variantClasses = {
+    default: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
+    primary: 'bg-[var(--ui-color-intent-primary)]/10 border-[var(--ui-color-intent-primary)]/20',
+    telemetry: 'bg-[var(--ui-color-intent-telemetry)]/10 border-[var(--ui-color-intent-telemetry)]/20',
+    warning: 'bg-[var(--ui-color-intent-warning)]/10 border-[var(--ui-color-intent-warning)]/20',
+  };
+
+  return (
+    <div className={`w-10 h-10 flex items-center justify-center border ${variantClasses[variant]}`}>
+      {children}
+    </div>
+  );
+}