72 lines
2.8 KiB
React
72 lines
2.8 KiB
React
import React, {useRef, useState} from 'react';
|
|
import {Loader, Search} from 'react-feather';
|
|
import SearchResultsDialog from "./SearchResultsDialog";
|
|
|
|
function SearchComponent() {
|
|
const [searching, setSearching] = useState(false);
|
|
const [loading,setLoading] = useState(false)
|
|
const input = useRef(null);
|
|
const [text,setText] = useState('')
|
|
const [data,setData] = useState(null)
|
|
const search = () => {
|
|
setLoading(true)
|
|
fetch(`https://openart.ai/api/workflows/list?query_type=workflow&keyword=${text}&pagesSize=25`)
|
|
.then(res=>res.json())
|
|
.then((results)=> {
|
|
setLoading(false)
|
|
setData(results)
|
|
setSearching(false)
|
|
setText('')
|
|
})
|
|
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className={'bottom-4 fixed w-full flex justify-center p-2'}>
|
|
<div className={'w-full max-w-5xl flex'}>
|
|
<div
|
|
onClick={() => {
|
|
if (!searching) {
|
|
setSearching(true);
|
|
setTimeout(() => {
|
|
input.current.focus();
|
|
}
|
|
, 300);
|
|
}
|
|
}}
|
|
className={`bg-white ${
|
|
searching ? 'w-full' : 'w-10 h-10' // Set initial width here
|
|
} rounded-full items-center cursor-pointer flex flex-row space-x-2 transition-width duration-300 ease-in-out`}
|
|
>
|
|
<div
|
|
onClick={() => searching && setSearching(false)}
|
|
onKeyDown={e=>e.key==='Escape' && setSearching(false)}
|
|
className={"flex items-center justify-center w-10 h-10"}
|
|
>
|
|
{loading ? <Loader className={'text-black animate-spin'} />:<Search className={'text-black'} />}
|
|
|
|
</div>
|
|
|
|
{searching && <input ref={input} value={text}
|
|
|
|
// search on enter
|
|
onKeyDown={e=> {
|
|
if(e.key === 'Enter') {
|
|
search()
|
|
}
|
|
}}
|
|
placeholder={"Search for workflows"}
|
|
|
|
onChange={e=>setText(e.target.value)}
|
|
className={'w-full border-none outline-none ring-0 text-xl rounded-full'} type='text' />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<SearchResultsDialog isOpen={data!=null} close={()=>setData(null)} data={data}/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SearchComponent;
|