43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import searchBarStyle from "./styles.module.css";
|
|
|
|
const SearchBar = () => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<form
|
|
className={`${searchBarStyle.searchBarContainer} ${open ? searchBarStyle.open : ""}`}
|
|
>
|
|
<input
|
|
className={searchBarStyle.input}
|
|
type="text"
|
|
name=""
|
|
id=""
|
|
placeholder="Search"
|
|
/>
|
|
<div
|
|
className={searchBarStyle.searchBtn}
|
|
onClick={() => setOpen((open) => !open)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={24}
|
|
height={24}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default SearchBar;
|