You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.1 KiB
33 lines
1.1 KiB
import React from 'react';
|
|
|
|
const Search: React.FC = () => {
|
|
return (
|
|
<div className="flex-1 flex">
|
|
<form className="w-full flex md:ml-0" action="#" method="GET">
|
|
<label htmlFor="search_field" className="sr-only">
|
|
Search
|
|
</label>
|
|
<div className="relative w-full text-white focus-within:text-gray-200">
|
|
<div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
|
|
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
id="search_field"
|
|
className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
|
|
placeholder="Search"
|
|
type="search"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Search;
|