46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface FormFieldProps {
|
|
label: string;
|
|
icon?: LucideIcon;
|
|
children: React.ReactNode;
|
|
required?: boolean;
|
|
error?: string;
|
|
hint?: string;
|
|
}
|
|
|
|
export function FormField({
|
|
label,
|
|
icon,
|
|
children,
|
|
required = false,
|
|
error,
|
|
hint,
|
|
}: FormFieldProps) {
|
|
return (
|
|
<Stack gap={2}>
|
|
<label className="block text-sm font-medium text-gray-300">
|
|
<Stack direction="row" align="center" gap={2}>
|
|
{icon && <Icon icon={icon} size={4} color="#6b7280" />}
|
|
<Text size="sm" weight="medium" color="text-gray-300">{label}</Text>
|
|
{required && <Text color="text-error-red">*</Text>}
|
|
</Stack>
|
|
</label>
|
|
{children}
|
|
{error && (
|
|
<Text size="xs" color="text-error-red" block mt={1}>{error}</Text>
|
|
)}
|
|
{hint && !error && (
|
|
<Text size="xs" color="text-gray-500" block mt={1}>{hint}</Text>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|