fix: autofocus

This commit is contained in:
Damien Ostler 2024-06-01 02:01:01 -04:00
parent d3da16bcf4
commit 38eb7530d3
3 changed files with 4 additions and 4 deletions

View File

@ -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

View File

@ -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}

View File

@ -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)} />
))}