Merge pull request #79 from brown-ccv/chore-limit-description

feat: limit textarea characters
brown-ccv · Aug 6, 2024 · 0e0c2f2 · 0e0c2f2
2 parents 2c073b0 + 8df1dfc
commit 0e0c2f2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -14,13 +14,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <Form.Field name={name} className="flex flex-col gap-2">
         <Form.Label>{label}</Form.Label>
-        <Form.Control asChild>
-          <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
-            <span className="text-neutral-300 w-5 h-5">{icon}</span>
+        <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
+          {icon && <span className="text-neutral-300 w-5 h-5">{icon}</span>}
+
+          <Form.Control asChild>
             <input {...delegated} ref={ref} />
-          </div>
-        </Form.Control>
-        <Form.Message className="text-primary-300" match="valueMissing">
+          </Form.Control>
+        </div>
+        <Form.Message className="px-2 text-primary-300" match="valueMissing">
           Please enter your {label}
         </Form.Message>
         {match !== undefined && (

diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import * as Form from "@radix-ui/react-form"
 
 interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -7,20 +7,30 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 }
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ name, label, ...delegated }, ref) => (
-    <Form.Field name={name} className="flex flex-col gap-2">
-      <Form.Label>{label}</Form.Label>
-      <Form.Control asChild>
-        <textarea
-          rows={4}
-          className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full"
-          {...delegated}
-          ref={ref}
-        />
-      </Form.Control>
-      <Form.Message className="text-primary-300" match="valueMissing">
-        Please enter your {label}
-      </Form.Message>
-    </Form.Field>
-  )
+  ({ name, label, ...delegated }, ref) => {
+    const [characterCount, setCharacterCount] = useState(0)
+    const maxLength = 300
+
+    return (
+      <Form.Field name={name} className="relative flex flex-col gap-2">
+        <Form.Label>{label}</Form.Label>
+        <span className="px-2 py-1 text-xs text-neutral-300 rounded absolute top-9 right-1">
+          {characterCount}/{maxLength}
+        </span>
+        <Form.Control asChild>
+          <textarea
+            rows={4}
+            maxLength={maxLength}
+            className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full py-6"
+            {...delegated}
+            ref={ref}
+            onChange={(e) => setCharacterCount(e.target.value.length)}
+          />
+        </Form.Control>
+        <Form.Message className="text-primary-300 px-2" match="valueMissing">
+          Please enter your {label}
+        </Form.Message>
+      </Form.Field>
+    )
+  }
 )