69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
|
'use client';
|
||
|
|
|
||
|
|
import { Box, Paper, IconButton, InputBase, Select, MenuItem, Button, Badge } from '@mui/material';
|
||
|
|
import SearchIcon from '@mui/icons-material/Search';
|
||
|
|
import FilterListIcon from '@mui/icons-material/FilterList';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
|
||
|
|
const SearchBar = ({
|
||
|
|
searchQuery,
|
||
|
|
searchField,
|
||
|
|
onSearchQueryChange,
|
||
|
|
onSearchFieldChange,
|
||
|
|
onMoreFiltersClick,
|
||
|
|
activeFilterCount = 0
|
||
|
|
}) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
||
|
|
<Paper
|
||
|
|
component="form"
|
||
|
|
sx={{
|
||
|
|
p: '2px 4px',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
width: 400,
|
||
|
|
borderRadius: 2
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<IconButton sx={{ p: '10px' }} aria-label="search">
|
||
|
|
<SearchIcon />
|
||
|
|
</IconButton>
|
||
|
|
<InputBase
|
||
|
|
sx={{ ml: 1, flex: 1 }}
|
||
|
|
placeholder={t('datasets.searchPlaceholder')}
|
||
|
|
value={searchQuery}
|
||
|
|
onChange={e => onSearchQueryChange(e.target.value)}
|
||
|
|
endAdornment={
|
||
|
|
<Select
|
||
|
|
value={searchField}
|
||
|
|
onChange={e => onSearchFieldChange(e.target.value)}
|
||
|
|
variant="standard"
|
||
|
|
sx={{
|
||
|
|
minWidth: 90,
|
||
|
|
'& .MuiInput-underline:before': { borderBottom: 'none' },
|
||
|
|
'& .MuiInput-underline:after': { borderBottom: 'none' },
|
||
|
|
'& .MuiInput-underline:hover:not(.Mui-disabled):before': { borderBottom: 'none' }
|
||
|
|
}}
|
||
|
|
disableUnderline
|
||
|
|
>
|
||
|
|
<MenuItem value="question">{t('datasets.fieldQuestion')}</MenuItem>
|
||
|
|
<MenuItem value="answer">{t('datasets.fieldAnswer')}</MenuItem>
|
||
|
|
<MenuItem value="cot">{t('datasets.fieldCOT')}</MenuItem>
|
||
|
|
<MenuItem value="questionLabel">{t('datasets.fieldLabel')}</MenuItem>
|
||
|
|
</Select>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</Paper>
|
||
|
|
<Badge badgeContent={activeFilterCount} color="error" overlap="circular">
|
||
|
|
<Button variant="outlined" onClick={onMoreFiltersClick} startIcon={<FilterListIcon />} sx={{ borderRadius: 2 }}>
|
||
|
|
{t('datasets.moreFilters')}
|
||
|
|
</Button>
|
||
|
|
</Badge>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SearchBar;
|