[FEATURE] Improvement - char limit on tags

components/tag/TagsInput.js

@@ -1,19 +1,40 @@
 import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon";
 import Input from "../form/Input";
+import Notification from "@components/Notification";
 
-export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef }) {
-
-
+export default function TagsInput({
+  tags,
+  onTagAdd,
+  onTagRemove,
+  inputRef,
+  showNotification,
+  setShowNotification,
+}) {
   //key code
   const { comma, backspace, enter } = {
     comma: 188,
     backspace: 8,
     enter: 13,
   };
-
+  const maxLength = 32;
   const handleKeyUp = (e) => {
     const inputValue = inputRef.current.value;
-    if (e.keyCode === comma || inputValue.endsWith(",") || e.keyCode === enter) {
+    if (inputValue.length >= maxLength && e.keyCode !== backspace) {
+      // '=' sign because in 32 char ',' sign does't count
+      setShowNotification({
+        show: true,
+        type: "error",
+        message: "Tag",
+        additionalMessage: "Tag limit exceeded",
+      });
+      return;
+    }
+
+    if (
+      e.keyCode === comma ||
+      inputValue.endsWith(",") ||
+      e.keyCode === enter
+    ) {
       const newTag = inputValue.trim().replace(/,/g, "");
       if (!newTag) {
         return;
@@ -57,6 +78,16 @@ export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef }) {
 
   return (
     <>
+      <Notification
+        show={showNotification.show}
+        type={showNotification.type}
+        onClose={() =>
+          setShowNotification({ ...showNotification, show: false })
+        }
+        message={showNotification.message}
+        additionalMessage={showNotification.additionalMessage}
+
+      />
       <label htmlFor="tags">Tags</label>
       <ul
         role="list"

pages/account/manage/event/[[...data]].js

@@ -341,9 +341,11 @@ export default function ManageEvent({ BASE_URL, event }) {
                       onTagRemove={handleTagRemove}
                       tags={tags}
                       inputRef={tagInputRef}
+                      showNotification={showNotification}
+                      setShowNotification={setShowNotification}
                     />
                     <p className="text-sm text-primary-medium-low dark:text-primary-low-high">
-                      Separate tags with commas (tags cannot be duplicated).
+                      Separate tags with commas (tags cannot be duplicated and max 32 characters).
                     </p>
                   </div>
                 </div>

pages/account/manage/profile.js

@@ -251,9 +251,11 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
                         onTagRemove={handleTagRemove}
                         tags={tags}
                         inputRef={tagInputRef}
+                        showNotification={showNotification}
+                      setShowNotification={setShowNotification}
                       />
                       <p className="text-sm text-primary-medium-low dark:text-primary-low-high">
-                        Separate tags with commas (tags cannot be duplicated).
+                        Separate tags with commas (tags cannot be duplicated and max 32 characters).
                       </p>
                     </div>
                   </div>

pages/docs/how-to-guides/editing-forms.mdx

@@ -28,11 +28,13 @@ You can change any of the form fields except `username` as this will always show
 
 ![BioDrop Forms page](https://github.com/EddieHubCommunity/BioDrop/assets/82668196/86119a20-412a-449a-acba-87df2510ad25)
 
+5. Maximum 32 characters allowed in each tag , In case you exceed the characters than you can not separate or save the tag by comma.
+
 Note: as you complete these fields the information will appear on the right hand side, which will allow you to preview how your Profile will look.
 
-5. Click `Save`
+6. Click `Save`
 
-6. Your changed Profile will be then be available on your custom URL (BioDrop.io/eddiejaoude)
+7. Your changed Profile will then be available at your custom URL (BioDrop.io/eddiejaoude)
 
 <Alert
   type="warning"