Make '/teks' dymamic & add Drawer components

components/teks/drawer-bar.js

@@ -0,0 +1,88 @@
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+
+import {
+  Divider,
+  FormControl,
+  InputAdornment,
+  InputBase,
+  makeStyles
+} from '@material-ui/core'
+
+import SearchIcon from '@material-ui/icons/Search'
+
+import MizikLis from '../awtis/mizik-lis'
+
+const useStyles = makeStyles(theme => ({
+  toolbar: theme.mixins.toolbar,
+  list: {
+    marginBottom: '6em'
+  },
+  form: {
+    marginLeft: theme.spacing(1)
+  },
+  text: {
+    marginBottom: '0.5em'
+  }
+}))
+
+const getMizikFiltered = (miziks, filter) => {
+  if (miziks) {
+    return miziks.filter(({titre}) => titre.toLowerCase().includes(filter.toLowerCase()))
+  }
+}
+
+export default function DrawerBar({setMobileOpen, miziks, mizik}) {
+  const slug = mizik ? mizik[0].slug : null
+  const classes = useStyles()
+
+  const [search, setSearch] = useState('')
+  const [selectedMizikSlug, setSelectedMizikSlug] = useState(slug)
+
+  const mizikFiltered = getMizikFiltered(miziks, search)
+
+  const handleSearch = event => {
+    event.preventDefault()
+    const value = event.target.value
+    setSearch(value)
+  }
+
+  return (
+    <div className='search'>
+      <FormControl className={classes.form}>
+        <InputBase
+          className={classes.toolbar}
+          placeholder='Chèché an tèks'
+          startAdornment={
+            <InputAdornment position='start'>
+              <SearchIcon />
+            </InputAdornment>
+          }
+          value={search}
+          onChange={handleSearch}
+        />
+      </FormControl>
+      <Divider />
+      <div className={classes.list}>
+        <MizikLis
+          hasAwtis
+          setMobileOpen={setMobileOpen}
+          miziks={mizikFiltered}
+          selectedMizikSlug={selectedMizikSlug}
+          setSelectedMizikSlug={setSelectedMizikSlug}
+        />
+      </div>
+    </div>
+  )
+}
+
+DrawerBar.propTypes = {
+  setMobileOpen: PropTypes.func,
+  miziks: PropTypes.array.isRequired,
+  mizik: PropTypes.array
+}
+
+DrawerBar.defaultProps = {
+  setMobileOpen: null,
+  mizik: null
+}