From 7fec3450d9c1a1e37fb2a8d79896c41fa3335313 Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Sat, 1 Jun 2024 16:36:06 -0400
Subject: [PATCH] fix:add badge showing how many tags selected (#7)

* Update .gitignore

* fix: added a badge for number of tags selected
---
 .gitignore                              |  6 +++---
 .idea/.name                             |  1 +
 components/neroshitron/search_input.tsx | 16 ++++++++++------
 3 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 .idea/.name

diff --git a/.gitignore b/.gitignore
index 00bf3d3..13ddefb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,7 +23,7 @@ yarn-error.log*
 /supabase/volumes/db/data
 /supabase/volumes/storage
 supabase.zip
-.idea/workspace.xml
-.idea/copilot/chatSessions/xd.lck
-.idea/copilot/chatSessions/blobs/version
 .idea/copilot/chatSessions/00000000000.xd
+.idea/copilot/chatSessions/blobs/version
+.idea/copilot/chatSessions/xd.lck
+.idea/workspace.xml
diff --git a/.idea/.name b/.idea/.name
new file mode 100644
index 0000000..3e4e48b
--- /dev/null
+++ b/.idea/.name
@@ -0,0 +1 @@
+.gitignore
\ No newline at end of file
diff --git a/components/neroshitron/search_input.tsx b/components/neroshitron/search_input.tsx
index 84c5943..ba39484 100644
--- a/components/neroshitron/search_input.tsx
+++ b/components/neroshitron/search_input.tsx
@@ -70,13 +70,17 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
               <input autoFocus value={search} onChange={(e) => setSearch(e.target.value)} className="rounded-l-md h-16 bg-gray-100 text-grey-darker py-2 font-normal text-grey-darkest border border-gray-100 font-bold w-full py-1 px-2 outline-none text-lg text-gray-600" type="text" placeholder="Looking for a specific collection?" />
 
               <span className="flex items-center bg-gray-100  rounded rounded-l-none border-0 px-3 font-bold text-grey-100">
-                <button key="tags" data-tip={selectedTags.join(',')}  onClick={()=>{openTags()}} type="button" className={`bg-neroshi-blue-900 hover:bg-neroshi-blue-800 text-lg text-white font-bold py-3 px-6 rounded ${selectedTags.length == 0 ? 'animate-pulse animate-infinite animate-ease-out' : 'animate-in'}`}>
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 6h.008v.008H6V6Z" />
-                </svg>
-
+              <div className="relative">
+                <button key="tags" data-tip={selectedTags.join(',')} onClick={()=>{openTags()}} type="button" className={`bg-neroshi-blue-900 hover:bg-neroshi-blue-800 text-lg text-white font-bold py-3 px-6 rounded ${selectedTags.length == 0 ? 'animate-pulse animate-infinite animate-ease-out' : 'animate-in'}`}>
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 6h.008v.008H6V6Z" />
+                  </svg>
                 </button>
+                <span className="absolute top-8 left-14 inline-block w-6 h-6 text-xs bg-pink-800 text-white rounded-full flex items-center justify-center">
+                  {selectedTags.length}
+                </span>
+              </div>
   
   
                 <button