import React, { useState, useEffect } from ‘react’;
import { Container, Input, SearchIconSection } from ‘./styles’;
import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’;
import { faSearch } from ‘@fortawesome/free-solid-svg-icons’;
import { builder } from ‘@builder.io/react’;
import { useRouter } from ‘next/router’;
type Props = {
placeholder: string;
};
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY || ‘’);
function InputSearch(props: Props) {
const router = useRouter();
const [searchTerm, setSearchTerm] = useState(‘’);
const [searchResults, setSearchResults] = useState();
useEffect(() => {
/* if (searchTerm) {
builder
.getAll(‘pible-page-article’, {
limit: 100,
query: {
data: {
$or: [
{
title: { $eq: ‘dev’ },
},
],
},
},
})
.toPromise()
.then((response) => setSearchResults(response));
} */
builder.getAll('pible-page-article', { options: { includeRefs: true } })
.then(response => {
console.log('foi ', response)
setSearchResults(response);
}).catch(error => console.log('error ', error));
}, [searchTerm]);
const handleSearch = () => {
router.push(/tax-pible/${searchTerm});
};
return (
<Input
type=“text”
placeholder={props.placeholder}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<SearchIconSection onClick={handleSearch}>
<FontAwesomeIcon icon={faSearch} />
</SearchIconSection>
{/* <ul>
{searchResults.length > 0 && searchResults.map(({ data }, index) => {
console.log('ields ', data.title)
return (
<li key={index}>{data.title}</li>
)
})}
</ul> */}
</Container>
);
}
export default InputSearch;
