From 95de293695afe17b1bdf2827e748b34255a58a05 Mon Sep 17 00:00:00 2001
From: mazya <mazur097mazur@gmail.com>
Date: Tue, 19 Mar 2024 13:26:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AE=20Add=20characters=20counter=20to?=
 =?UTF-8?q?=20form=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/form.tsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index 13e1f8e8..ffddf026 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -172,6 +172,26 @@ const FormMessage = forwardRef<
 });
 FormMessage.displayName = "FormMessage";
 
+interface FormCounterProps
+  extends Pick<HTMLAttributes<HTMLSpanElement>, "className"> {
+  current: number;
+  limit: number;
+}
+
+const FormCounter = ({ current, limit, className }: FormCounterProps) => {
+  return (
+    <span
+      className={cn(
+        "!-mb-3 !mt-0 ml-auto mr-6 block w-fit -translate-y-1/2 rounded bg-background px-1 text-xs leading-none text-primary/40",
+        className,
+      )}
+    >
+      {current}/{limit}
+    </span>
+  );
+};
+FormCounter.displayName = "FormCounter";
+
 const FormFooter = ({
   className,
   children,
@@ -189,13 +209,14 @@ const FormFooter = ({
 FormFooter.displayName = "FormFooter";
 
 export {
-  useFormField,
   Form,
-  FormItem,
-  FormLabel,
   FormControl,
+  FormCounter,
   FormDescription,
-  FormMessage,
   FormField,
   FormFooter,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
 };