Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import { useState } from "react"; import styled from "styled-components"; import { Box, Button, Input } from "rimble-ui"; import { colors } from "../../themes"; import { Tabs } from "../layouts"; import { SearchIcon } from "./Icons"; export const StyledTabbedInput = styled(Input)` border-radius: 0 0 4px 4px !important; border: 0 !important; padding: 34px 50px 34px 24px !important; width: 100%; `; export interface TabbedSearchBoxProps { placeholderText?: string; onSearch(value: string): void; } export const TabbedSearchBox: React.FunctionComponent<TabbedSearchBoxProps> = (props) => { const urlParams = new URLSearchParams(window.location.search); const filter = urlParams.get("filter"); const [search, setSearch] = useState(filter || ""); function onKeyDown(event: any) { if (event.code === "Enter") { props.onSearch(search); } } return ( <Box position="relative" width="100%"> <StyledTabbedInput onChange={(event: any) => setSearch(event.target.value)} onKeyDown={(event: any) => onKeyDown(event)} placeholder={props.placeholderText || "Search"} required type="text" value={search} /> <Button.Text onClick={() => props.onSearch(search)} style={{ position: "absolute", top: 10, right: 5, zIndex: 9 }} > <SearchIcon /> </Button.Text> </Box> ); }; export interface TabbedSearchProps { activeTab: string; tabs: any; } export const TabbedSearch: React.FunctionComponent<TabbedSearchProps> = (props) => { const [activeTabName, setActiveTabName] = useState(props.activeTab); return ( <Box border={2} borderRadius={1}> <Tabs bg={colors.primary.background} tabs={props.tabs} activeTabName={activeTabName} onTabClicked={(tabName) => setActiveTabName(tabName)} /> </Box> ); }; |