website refactor

apps/website/ui/TextArea.tsx

@@ -1,56 +1,49 @@
-
-
-import React, { TextareaHTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
 import { Box } from './primitives/Box';
 import { Stack } from './primitives/Stack';
 import { Text } from './Text';
 
-interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: React.ReactNode;
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
   errorMessage?: string;
   variant?: 'default' | 'error';
   fullWidth?: boolean;
 }
 
-export function TextArea({
-  label,
-  errorMessage,
-  variant = 'default',
-  fullWidth = true,
-  className = '',
-  ...props
-}: TextAreaProps) {
-  const isError = variant === 'error' || !!errorMessage;
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ label, errorMessage, variant = 'default', fullWidth = true, className = '', ...props }, ref) => {
+    const isError = variant === 'error' || !!errorMessage;
+    
+    return (
+      <Stack gap={1.5} fullWidth={fullWidth}>
+        {label && (
+          <Text as="label" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+            {label}
+          </Text>
+        )}
+        <Box position="relative" fullWidth={fullWidth}>
+          <Box
+            as="textarea"
+            ref={ref}
+            fullWidth={fullWidth}
+            p={3}
+            bg="bg-deep-graphite"
+            rounded="lg"
+            color="text-white"
+            border
+            borderColor={isError ? 'var(--warning-amber)' : 'rgba(38, 38, 38, 0.8)'}
+            className={`placeholder:text-gray-500 focus:ring-2 focus:ring-primary-blue transition-all duration-150 sm:text-sm ${className}`}
+            {...props}
+          />
+          {errorMessage && (
+            <Text size="xs" color="text-warning-amber" mt={1}>
+              {errorMessage}
+            </Text>
+          )}
+        </Box>
+      </Stack>
+    );
+  }
+);
 
-  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>
-  );
-}
+TextArea.displayName = 'TextArea';