From 53b96d8383715b7e641cd92003ec36ba88adc2c9 Mon Sep 17 00:00:00 2001
From: SamraddhiJoshi <samraddhijoshi406@gmail.com>
Date: Sat, 6 Jun 2026 00:03:05 +0530
Subject: [PATCH] feat: Add character count indicators to Input and Textarea
 components (fixes #34)

---
 .../components/ResumeForm/Form/InputGroup.tsx | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app/components/ResumeForm/Form/InputGroup.tsx b/src/app/components/ResumeForm/Form/InputGroup.tsx
index 22c8156..909f965 100644
--- a/src/app/components/ResumeForm/Form/InputGroup.tsx
+++ b/src/app/components/ResumeForm/Form/InputGroup.tsx
@@ -11,6 +11,7 @@ interface InputProps<K extends string, V extends string | string[]> {
   value?: V;
   placeholder: string;
   onChange: (name: K, value: V) => void;
+  maxLength?: number;
 }
 
 /**
@@ -42,6 +43,7 @@ export const Input = <K extends string>({
   onChange,
   label,
   labelClassName,
+  maxLength,
 }: InputProps<K, string>) => {
   return (
     <InputGroupWrapper label={label} className={labelClassName}>
@@ -52,7 +54,12 @@ export const Input = <K extends string>({
         placeholder={placeholder}
         onChange={(e) => onChange(name, e.target.value)}
         className={INPUT_CLASS_NAME}
+        maxLength={maxLength}
       />
+      <div className="mt-1 text-right text-[11px] font-normal text-gray-400">
+        {value.length}
+        {maxLength ? ` / ${maxLength}` : ""} characters
+      </div>
     </InputGroupWrapper>
   );
 };
@@ -64,6 +71,7 @@ export const Textarea = <T extends string>({
   value = "",
   placeholder,
   onChange,
+  maxLength,
 }: InputProps<T, string>) => {
   const textareaRef = useAutosizeTextareaHeight({ value });
 
@@ -76,7 +84,12 @@ export const Textarea = <T extends string>({
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(name, e.target.value)}
+        maxLength={maxLength}
       />
+      <div className="mt-1 text-right text-[11px] font-normal text-gray-400">
+        {value.length}
+        {maxLength ? ` / ${maxLength}` : ""} characters
+      </div>
     </InputGroupWrapper>
   );
 };
@@ -122,7 +135,7 @@ const BulletListTextareaGeneral = <T extends string>({
   showBulletPoints = true,
 }: InputProps<T, string[]> & { showBulletPoints?: boolean }) => {
   const html = getHTMLFromBulletListStrings(bulletListStrings);
- const charCount = bulletListStrings.join(" ").length;
+  const charCount = bulletListStrings.join(" ").length;
   const maxChars = 300;
 
   return (
@@ -144,7 +157,11 @@ const BulletListTextareaGeneral = <T extends string>({
         }}
         html={html}
       />
-      <div className={`text-right text-xs mt-1 ${charCount > maxChars ? "text-red-500" : "text-gray-400"}`}>
+      <div
+        className={`mt-1 text-right text-xs ${
+          charCount > maxChars ? "text-red-500" : "text-gray-400"
+        }`}
+      >
         {charCount} / {maxChars} characters
       </div>
     </InputGroupWrapper>