import { useMemo, useState } from "react" import styled from "@emotion/styled/macro" import { useBookmarks } from "@startpage/bookmarks" import { performSearch } from "@startpage/search" import { Search } from "react-feather" import { IconButton, TextInput } from "../components" import { useSearchSettings } from "../Providers" const Layout = styled.div` display: flex; align-items: center; ` const Input = styled(TextInput)` width: 100%; ` export const Searchbar = () => { const [{ engine, placeholder, forwardingLookup }] = useSearchSettings() const [value, setValue] = useState("") const { bookmarkGroups } = useBookmarks() const bookmarkLookup = useMemo(() => { const lookup: Record<string, string> = {} bookmarkGroups.forEach(group => group.bookmarks.forEach( bookmark => (lookup[bookmark.label] = bookmark.url) ) ) return lookup }, [bookmarkGroups]) const handleSearch = () => performSearch(value, engine, { directLink: true, forwardingLookup: { ...bookmarkLookup, ...forwardingLookup }, }) return ( <Layout> <IconButton icon={Search} onClick={handleSearch} label="Search" /> <Input value={value} placeholder={placeholder} autoFocus onChange={setValue} onKeyPress={key => key === "Enter" && handleSearch()} /> </Layout> ) }