From 38eb7530d32483de2c693a4f78a686b99e36ab40 Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Sat, 1 Jun 2024 02:01:01 -0400
Subject: [PATCH] fix: autofocus

---
 components/neroshitron/search_input.tsx | 2 +-
 components/neroshitron/tag_pill.tsx     | 2 +-
 components/neroshitron/tag_selector.tsx | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/neroshitron/search_input.tsx b/components/neroshitron/search_input.tsx
index 0e5c8a4..fbd0e2a 100644
--- a/components/neroshitron/search_input.tsx
+++ b/components/neroshitron/search_input.tsx
@@ -47,7 +47,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
       <div className="relative md:w-full lg:w-1/2 mx-auto flex flex-col items-center justify-center">
         <div className="search-box mx-auto my-auto w-full sm:w-full md:w-full lg:w-3/4 xl:w-3/4">
           <div className="flex flex-row">
-            <input 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?" />
+            <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 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' : ''}`}>
                 Tags
diff --git a/components/neroshitron/tag_pill.tsx b/components/neroshitron/tag_pill.tsx
index 81899d4..b9f197b 100644
--- a/components/neroshitron/tag_pill.tsx
+++ b/components/neroshitron/tag_pill.tsx
@@ -9,7 +9,7 @@ const Tag = ({ onTagClicked, selected, tag, }:TagProps) => {
         <button
         key={tag+"-button"}
         type="button"
-          className={`w-full m-4 rounded-md no-underline text-white py-1 font-medium text-center ${selected ? 'hover:bg-pink-800 bg-pink-900' : 'hover:bg-neroshi-blue-700 bg-neroshi-blue-800'}`}
+          className={`animate-in w-full m-4 rounded-md no-underline text-white py-1 font-medium text-center ${selected ? 'hover:bg-pink-800 bg-pink-900' : 'hover:bg-neroshi-blue-700 bg-neroshi-blue-800'}`}
           onClick={() => onTagClicked(tag)}
         >
           {tag}
diff --git a/components/neroshitron/tag_selector.tsx b/components/neroshitron/tag_selector.tsx
index 892a236..1b9164c 100644
--- a/components/neroshitron/tag_selector.tsx
+++ b/components/neroshitron/tag_selector.tsx
@@ -50,8 +50,8 @@ const TagSelector = forwardRef<TagSelectorProps, { selectedTagsInput: string[],
     }, []);
 
     return (
-        <div className="flex md:w-full lg:w-1/2 animate-in mx-auto pt-4">
-            <div className="grid grid-cols-6 gap-4 w-full mx-auto pt-4 bg-neroshi-blue-900 pr-8 pb-4 rounded-md opacity-75 backdrop-filter backdrop-blur-md">
+        <div className="animate-in flex md:w-full lg:w-1/2 animate-in mx-auto pt-4">
+            <div className="grid grid-cols-5 gap-4 w-full mx-auto pt-4 bg-neroshi-blue-900 pr-8 pb-4 rounded-md opacity-75 backdrop-filter backdrop-blur-md">
                 {tags.map((tag: any) => (
                     <Tag key={tag.name} tag={tag.name} selected={selectedTags.includes(tag.name)} onTagClicked={(tag) => handleTag(tag)} />
                 ))}