57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
|
|
|
|
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>
|
|
);
|
|
}
|