feat(labeled-input): add Big labeled input field

src/components/custom-ui/labeled-input.tsx

@@ -7,7 +7,7 @@ export default function LabeledInput({
   placeholder,
   value,
   name,
-  big = false, // Add a prop for the bigger variant, default is false
+  size = 'default',
   autocomplete,
   error,
   ...rest
@@ -17,14 +17,14 @@ export default function LabeledInput({
   placeholder?: string;
   value?: string;
   name?: string;
-  big?: boolean; // Optional prop for bigger input
+  size?: 'default' | 'big' | 'textarea';
   autocomplete?: string;
   error?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>) {
   return (
     <div className='grid grid-cols-1 gap-1'>
       <Label htmlFor={name}>{label}</Label>
-      {big ? (
+      {size === 'textarea' ? (
         <Textarea
           placeholder={placeholder}
           defaultValue={value}
@@ -39,6 +39,11 @@ export default function LabeledInput({
           defaultValue={value}
           id={name}
           name={name}
+          className={
+            size === 'big'
+              ? 'h-12 file:h-10 text-lg gplaceholder:text-lg sm:text-2xl sm:placeholder:text-2xl'
+              : ''
+          }
           autoComplete={autocomplete}
           {...rest}
         />