first-update

easy-dataset-main/app/projects/[projectId]/datasets/components/SearchBar.js

@@ -0,0 +1,68 @@
+'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;