From 7bccd3405d9ff532834e4928c0dc52e943d2f99f Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Thu, 12 Jun 2025 13:25:13 +0200
Subject: [PATCH] feat(labeled-input): add Big labeled input field

---
 src/components/custom-ui/labeled-input.tsx | 11 ++++++++---
 src/components/ui/input.tsx                |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/custom-ui/labeled-input.tsx b/src/components/custom-ui/labeled-input.tsx
index dc5cf13..4f06b5d 100644
--- a/src/components/custom-ui/labeled-input.tsx
+++ b/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}
         />
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index b31862f..88dfe48 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       data-slot='input'
       className={cn(
         /* Text */
-        'text-text-input selection:text-text md:text-sm file:text-destructive file:text-sm placeholder:text-text-muted-input',
+        'text-text-input selection:text-text file:text-destructive file:text-sm placeholder:text-text-muted-input',
         /* Background */
         'bg-transparent selection:bg-muted-input file:bg-transparent',
         /* Border */
@@ -52,7 +52,7 @@ function Textarea({
       rows={rows}
       className={cn(
         /* Text */
-        'text-text-input selection:text-text md:text-sm placeholder:text-text-muted-input',
+        'text-text-input selection:text-text placeholder:text-text-muted-input',
         /* Background */
         'bg-transparent selection:bg-muted-input',
         /* Border */