1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
7 import { SearchView } from '~/store/search-bar/search-bar-reducer';
8 import { RecentQueriesItem, RenderSavedQueries } from '~/views-components/search-bar/search-bar-view';
10 type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
12 const styles: StyleRulesCallback<CssRules> = theme => {
16 justifyContent: 'flex-end',
17 paddingRight: theme.spacing.unit * 2,
18 paddingBottom: theme.spacing.unit,
23 padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
24 background: '#f2f2f2',
31 color: theme.palette.common.black
36 interface SearchBarBasicViewProps {
37 setView: (currentView: string) => void;
40 export const SearchBarBasicView = withStyles(styles)(
41 ({ classes, setView }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
42 <Paper className={classes.searchView}>
43 <div className={classes.searchQueryList}>Saved search queries</div>
44 <List component="nav" className={classes.list}>
45 <RenderSavedQueries text="Test" />
46 <RenderSavedQueries text="Demo" />
48 <div className={classes.searchQueryList}>Recent search queries</div>
49 <List component="nav" className={classes.list}>
50 <RecentQueriesItem text="cos" />
51 <RecentQueriesItem text="testtest" />
53 <div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>