website refactor

apps/website/ui/Checkbox.tsx

@@ -0,0 +1,34 @@
+
+
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+
+interface CheckboxProps {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export function Checkbox({ label, checked, onChange, disabled }: CheckboxProps) {
+  return (
+    <Box as="label" display="flex" alignItems="center" gap={2} cursor={disabled ? 'not-allowed' : 'pointer'}>
+      <Box
+        as="input"
+        type="checkbox"
+        checked={checked}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}
+        disabled={disabled}
+        w="4"
+        h="4"
+        bg="bg-deep-graphite"
+        border
+        borderColor="border-charcoal-outline"
+        rounded="sm"
+        className="text-primary-blue focus:ring-primary-blue"
+      />
+      <Text size="sm" color={disabled ? 'text-gray-500' : 'text-white'}>{label}</Text>
+    </Box>
+  );
+}