website refactor

apps/website/ui/FilePicker.tsx

@@ -0,0 +1,43 @@
+
+
+import React from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface FilePickerProps {
+  label?: string;
+  description?: string;
+  accept?: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+}
+
+export function FilePicker({ label, description, accept, onChange, disabled }: FilePickerProps) {
+  return (
+    <Stack gap={2}>
+      {label && (
+        <Text as="label" size="sm" weight="medium" color="text-gray-400">
+          {label}
+        </Text>
+      )}
+      {description && (
+        <Text size="xs" color="text-gray-500">
+          {description}
+        </Text>
+      )}
+      <Box
+        as="input"
+        type="file"
+        accept={accept}
+        onChange={onChange}
+        disabled={disabled}
+        display="block"
+        fullWidth
+        size="sm"
+        color="text-gray-400"
+        className="file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-primary-blue file:text-white file:cursor-pointer file:transition-colors hover:file:bg-primary-blue/80 disabled:file:opacity-50 disabled:file:cursor-not-allowed"
+      />
+    </Stack>
+  );
+}