| | |
|---|
| | | import { QuartzComponentConstructor, QuartzComponentProps } from "./types" |
|---|
| | | import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" |
|---|
| | | import style from "./styles/search.scss" |
|---|
| | | // @ts-ignore |
|---|
| | | import script from "./scripts/search.inline" |
|---|
| | | import { classNames } from "../util/lang" |
|---|
| | | import { i18n } from "../i18n" |
|---|
| | | |
|---|
| | | export interface SearchOptions { |
|---|
| | | enablePreview: boolean |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default ((userOpts?: Partial<SearchOptions>) => { |
|---|
| | | function Search({ displayClass }: QuartzComponentProps) { |
|---|
| | | const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { |
|---|
| | | const opts = { ...defaultOptions, ...userOpts } |
|---|
| | | |
|---|
| | | const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder |
|---|
| | | return ( |
|---|
| | | <div class={classNames(displayClass, "search")}> |
|---|
| | | <div id="search-icon"> |
|---|
| | | <p>Search</p> |
|---|
| | | <p>{i18n(cfg.locale).components.search.title}</p> |
|---|
| | | <div></div> |
|---|
| | | <svg |
|---|
| | | tabIndex={0} |
|---|
| | |
|---|
| | | id="search-bar" |
|---|
| | | name="search" |
|---|
| | | type="text" |
|---|
| | | aria-label="Search for something" |
|---|
| | | placeholder="Search for something" |
|---|
| | | aria-label={searchPlaceholder} |
|---|
| | | placeholder={searchPlaceholder} |
|---|
| | | /> |
|---|
| | | <div id="search-layout" data-preview={opts.enablePreview}></div> |
|---|
| | | </div> |
|---|
