website refactor

apps/website/ui/FormField.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Icon } from './Icon';
+
+import { LucideIcon } from 'lucide-react';
+
+interface FormFieldProps {
+  label: string;
+  icon?: LucideIcon;
+  children: React.ReactNode;
+  required?: boolean;
+  error?: string;
+  hint?: string;
+}
+
+export function FormField({ 
+  label, 
+  icon, 
+  children,
+  required = false,
+  error,
+  hint,
+}: FormFieldProps) {
+  return (
+    <Stack gap={2}>
+      <label className="block text-sm font-medium text-gray-300">
+        <Stack direction="row" align="center" gap={2}>
+          {icon && <Icon icon={icon} size={4} color="#6b7280" />}
+          <Text size="sm" weight="medium" color="text-gray-300">{label}</Text>
+          {required && <Text color="text-error-red">*</Text>}
+        </Stack>
+      </label>
+      {children}
+      {error && (
+        <Text size="xs" color="text-error-red" block mt={1}>{error}</Text>
+      )}
+      {hint && !error && (
+        <Text size="xs" color="text-gray-500" block mt={1}>{hint}</Text>
+      )}
+    </Stack>
+  );
+}