b61dc606c3
Co-authored-by: Suzanne Aitchison <suzanne@forem.com> Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { h } from 'preact';
|
|
import { forwardRef } from 'preact/compat';
|
|
import { Button } from '@crayons';
|
|
|
|
const SearchIcon = () => (
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
className="crayons-icon"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z" />
|
|
</svg>
|
|
);
|
|
|
|
export const SearchForm = forwardRef(({ searchTerm, onSubmitSearch }, ref) => (
|
|
<form
|
|
action="/search"
|
|
acceptCharset="UTF-8"
|
|
method="get"
|
|
onSubmit={onSubmitSearch}
|
|
role="search"
|
|
>
|
|
<input name="utf8" type="hidden" value="✓" />
|
|
<div class="crayons-fields crayons-fields--horizontal">
|
|
<div class="crayons-field flex-1 relative">
|
|
<input
|
|
ref={ref}
|
|
className="crayons-header--search-input crayons-textfield"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search..."
|
|
autoComplete="off"
|
|
aria-label="Search term"
|
|
value={searchTerm}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
variant="ghost"
|
|
contentType="icon-rounded"
|
|
icon={SearchIcon}
|
|
size="s"
|
|
className="absolute right-2 bottom-0 top-0 m-1"
|
|
aria-label="Search"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
));
|
|
|
|
SearchForm.propTypes = {
|
|
searchTerm: PropTypes.string.isRequired,
|
|
onSubmitSearch: PropTypes.func.isRequired,
|
|
};
|