From 87b73cb407b0cb01c889af4c89a7e3f7c0ce4aad Mon Sep 17 00:00:00 2001
From: pratik9818 <pratiksingh7105@gmail.com>
Date: Thu, 23 Nov 2023 22:56:39 +0530
Subject: [PATCH 1/6] changing

---
 components/tag/TagsInput.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/components/tag/TagsInput.js b/components/tag/TagsInput.js
index 4271c17ba25..be2ec02fbbd 100644
--- a/components/tag/TagsInput.js
+++ b/components/tag/TagsInput.js
@@ -1,7 +1,8 @@
 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
@@ -10,9 +11,20 @@ export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef }) {
     backspace: 8,
     enter: 13,
   };
-
+  const maxLength = 32;
   const handleKeyUp = (e) => {
     const inputValue = inputRef.current.value;
+    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) {
@@ -57,6 +69,15 @@ 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"

From 62cb8d39a02b98d0b736ddd528c336f4c156d0d3 Mon Sep 17 00:00:00 2001
From: pratik9818 <pratiksingh7105@gmail.com>
Date: Thu, 23 Nov 2023 23:57:09 +0530
Subject: [PATCH 2/6] update all changes

---
 components/tag/TagsInput.js                | 21 ++++++++++++++++-----
 pages/account/manage/event/[[...data]].js  |  4 +++-
 pages/account/manage/profile.js            |  4 +++-
 pages/docs/how-to-guides/editing-forms.mdx |  6 ++++--
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/components/tag/TagsInput.js b/components/tag/TagsInput.js
index be2ec02fbbd..d262c208d8b 100644
--- a/components/tag/TagsInput.js
+++ b/components/tag/TagsInput.js
@@ -2,9 +2,14 @@ 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,showNotification, setShowNotification, }) {
-
-
+export default function TagsInput({
+  tags,
+  onTagAdd,
+  onTagRemove,
+  inputRef,
+  showNotification,
+  setShowNotification,
+}) {
   //key code
   const { comma, backspace, enter } = {
     comma: 188,
@@ -25,7 +30,11 @@ export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef,showNo
       return;
     }
 
-    if (e.keyCode === comma || inputValue.endsWith(",") || e.keyCode === enter) {
+    if (
+      e.keyCode === comma ||
+      inputValue.endsWith(",") ||
+      e.keyCode === enter
+    ) {
       const newTag = inputValue.trim().replace(/,/g, "");
       if (!newTag) {
         return;
@@ -69,7 +78,7 @@ export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef,showNo
 
   return (
     <>
-     <Notification
+      <Notification
         show={showNotification.show}
         type={showNotification.type}
         onClose={() =>
@@ -77,6 +86,8 @@ export default function TagsInput({ tags, onTagAdd, onTagRemove, inputRef,showNo
         }
         message={showNotification.message}
         additionalMessage={showNotification.additionalMessage}
+        showNotification={showNotification}
+        setShowNotification={setShowNotification}
       />
       <label htmlFor="tags">Tags</label>
       <ul
diff --git a/pages/account/manage/event/[[...data]].js b/pages/account/manage/event/[[...data]].js
index 1afb2ce129f..cd9fbd98281 100644
--- a/pages/account/manage/event/[[...data]].js
+++ b/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>
diff --git a/pages/account/manage/profile.js b/pages/account/manage/profile.js
index b0e11cf1b62..5164095b654 100644
--- a/pages/account/manage/profile.js
+++ b/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>
diff --git a/pages/docs/how-to-guides/editing-forms.mdx b/pages/docs/how-to-guides/editing-forms.mdx
index 575e0b058ca..d50ed120644 100644
--- a/pages/docs/how-to-guides/editing-forms.mdx
+++ b/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"

From 89e45f7dac848d1fa68c0c1a25d5ef4f1733b8e1 Mon Sep 17 00:00:00 2001
From: pratik9818 <pratiksingh7105@gmail.com>
Date: Fri, 24 Nov 2023 00:07:55 +0530
Subject: [PATCH 3/6] complete all changes

---
 components/tag/TagsInput.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/tag/TagsInput.js b/components/tag/TagsInput.js
index d262c208d8b..3781c16af06 100644
--- a/components/tag/TagsInput.js
+++ b/components/tag/TagsInput.js
@@ -86,8 +86,7 @@ export default function TagsInput({
         }
         message={showNotification.message}
         additionalMessage={showNotification.additionalMessage}
-        showNotification={showNotification}
-        setShowNotification={setShowNotification}
+       
       />
       <label htmlFor="tags">Tags</label>
       <ul

From fe99f2f56a2525205327c6e182c5993195bbe3db Mon Sep 17 00:00:00 2001
From: Eddie Jaoude <eddie@jaoudestudios.com>
Date: Thu, 23 Nov 2023 19:01:37 +0000
Subject: [PATCH 4/6] Update components/tag/TagsInput.js

---
 components/tag/TagsInput.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/tag/TagsInput.js b/components/tag/TagsInput.js
index 3781c16af06..c85fcf3a28f 100644
--- a/components/tag/TagsInput.js
+++ b/components/tag/TagsInput.js
@@ -2,6 +2,7 @@ import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon";
 import Input from "../form/Input";
 import Notification from "@components/Notification";
 
+
 export default function TagsInput({
   tags,
   onTagAdd,

From fb87a8e63d95f245c60cffdcf3f5197b867bd701 Mon Sep 17 00:00:00 2001
From: pratik9818 <pratiksingh7105@gmail.com>
Date: Fri, 24 Nov 2023 09:20:25 +0530
Subject: [PATCH 5/6] done

---
 components/tag/TagsInput.js               | 1 -
 pages/account/manage/event/[[...data]].js | 3 ++-
 pages/account/manage/profile.js           | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/tag/TagsInput.js b/components/tag/TagsInput.js
index 3781c16af06..5741abb1779 100644
--- a/components/tag/TagsInput.js
+++ b/components/tag/TagsInput.js
@@ -86,7 +86,6 @@ export default function TagsInput({
         }
         message={showNotification.message}
         additionalMessage={showNotification.additionalMessage}
-       
       />
       <label htmlFor="tags">Tags</label>
       <ul
diff --git a/pages/account/manage/event/[[...data]].js b/pages/account/manage/event/[[...data]].js
index cd9fbd98281..2b373542351 100644
--- a/pages/account/manage/event/[[...data]].js
+++ b/pages/account/manage/event/[[...data]].js
@@ -345,7 +345,8 @@ export default function ManageEvent({ BASE_URL, event }) {
                       setShowNotification={setShowNotification}
                     />
                     <p className="text-sm text-primary-medium-low dark:text-primary-low-high">
-                      Separate tags with commas (tags cannot be duplicated and max 32 characters).
+                      Separate tags with commas (tags cannot be duplicated and
+                      max 32 characters).
                     </p>
                   </div>
                 </div>
diff --git a/pages/account/manage/profile.js b/pages/account/manage/profile.js
index 5164095b654..00d60fe7164 100644
--- a/pages/account/manage/profile.js
+++ b/pages/account/manage/profile.js
@@ -252,10 +252,11 @@ export default function Profile({ BASE_URL, profile, fileExists }) {
                         tags={tags}
                         inputRef={tagInputRef}
                         showNotification={showNotification}
-                      setShowNotification={setShowNotification}
+                        setShowNotification={setShowNotification}
                       />
                       <p className="text-sm text-primary-medium-low dark:text-primary-low-high">
-                        Separate tags with commas (tags cannot be duplicated and max 32 characters).
+                        Separate tags with commas (tags cannot be duplicated and
+                        max 32 characters).
                       </p>
                     </div>
                   </div>

From 141ca2ca429f67539a7239879d7433755a1d120a Mon Sep 17 00:00:00 2001
From: pratik9818 <pratiksingh7105@gmail.com>
Date: Fri, 24 Nov 2023 20:36:54 +0530
Subject: [PATCH 6/6] done

---
 components/tag/TagsInput.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/tag/TagsInput.js b/components/tag/TagsInput.js
index 30ece17d573..5741abb1779 100644
--- a/components/tag/TagsInput.js
+++ b/components/tag/TagsInput.js
@@ -2,7 +2,6 @@ import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon";
 import Input from "../form/Input";
 import Notification from "@components/Notification";
 
-
 export default function TagsInput({
   tags,
   onTagAdd,