website refactor

apps/website/ui/TextArea.tsx

@@ -0,0 +1,56 @@
+
+
+import React, { TextareaHTMLAttributes } from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: React.ReactNode;
+  errorMessage?: string;
+  variant?: 'default' | 'error';
+  fullWidth?: boolean;
+}
+
+export function TextArea({
+  label,
+  errorMessage,
+  variant = 'default',
+  fullWidth = true,
+  className = '',
+  ...props
+}: TextAreaProps) {
+  const isError = variant === 'error' || !!errorMessage;
+
+  return (
+    <Stack gap={1.5} fullWidth={fullWidth}>
+      {label && (
+        <Text as="label" size="sm" weight="medium" color="text-gray-300">
+          {label}
+        </Text>
+      )}
+      <Box position="relative" fullWidth={fullWidth}>
+        <Box
+          as="textarea"
+          fullWidth={fullWidth}
+          p={3}
+          rounded="md"
+          bg="bg-iron-gray"
+          color="text-white"
+          border
+          style={{
+            borderColor: isError ? 'var(--warning-amber)' : 'rgba(38, 38, 38, 0.8)',
+            resize: 'none',
+          }}
+          className={`placeholder:text-gray-500 focus:ring-2 focus:ring-primary-blue transition-all duration-150 sm:text-sm ${className}`}
+          {...props}
+        />
+      </Box>
+      {errorMessage && (
+        <Text size="xs" color="text-warning-amber">
+          {errorMessage}
+        </Text>
+      )}
+    </Stack>
+  );
+}