Make '/teks' dymamic & add Drawer components
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
import {makeStyles} from '@material-ui/core'
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
container: {
|
||||
marginTop: '2em'
|
||||
}
|
||||
}))
|
||||
|
||||
export default function DenyeTeks() {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<div className={classes.container}>
|
||||
Dènyé Tèks
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
import {useState} from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Link from 'next/link'
|
||||
|
||||
import {
|
||||
Grid,
|
||||
Toolbar,
|
||||
Typography,
|
||||
AppBar,
|
||||
CssBaseline,
|
||||
Drawer,
|
||||
Hidden,
|
||||
IconButton
|
||||
} from '@material-ui/core'
|
||||
|
||||
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
|
||||
|
||||
import MenuIcon from '@material-ui/icons/Menu'
|
||||
|
||||
import {makeStyles, useTheme} from '@material-ui/core/styles'
|
||||
|
||||
import DrawerBar from './drawer-bar'
|
||||
import DenyeTeks from './denye-teks'
|
||||
|
||||
const drawerWidth = 240
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
display: 'flex'
|
||||
},
|
||||
drawer: {
|
||||
marginTop: '10em',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: drawerWidth,
|
||||
flexShrink: 0
|
||||
}
|
||||
},
|
||||
appBar: {
|
||||
borderTop: '2px solid #303030',
|
||||
marginTop: '4.71rem',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
marginLeft: drawerWidth
|
||||
}
|
||||
},
|
||||
menuButton: {
|
||||
marginRight: theme.spacing(2),
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
display: 'none'
|
||||
}
|
||||
},
|
||||
toolbar: theme.mixins.toolbar,
|
||||
drawerPaper: {
|
||||
borderTop: '2px solid #303030',
|
||||
marginTop: '4.71rem',
|
||||
width: drawerWidth
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
padding: theme.spacing(3)
|
||||
},
|
||||
list: {
|
||||
marginBottom: '6em'
|
||||
},
|
||||
form: {
|
||||
marginLeft: theme.spacing(1)
|
||||
},
|
||||
text: {
|
||||
marginBottom: '0.5em'
|
||||
},
|
||||
button: {
|
||||
marginRight: '0.5em'
|
||||
},
|
||||
gridText: {
|
||||
border: '1px dashed grey',
|
||||
borderRadius: '5px',
|
||||
marginTop: '2em',
|
||||
marginInline: '2px'
|
||||
},
|
||||
grid: {
|
||||
marginTop: '1em'
|
||||
}
|
||||
}))
|
||||
|
||||
const formatJsonString = stringToFormat => {
|
||||
return stringToFormat.split('\n').map((string, index) => <div key={index}>{`${string}`}<br /></div>) // eslint-disable-line react/no-array-index-key
|
||||
}
|
||||
|
||||
export default function TeksDrawer({miziks, mizik}) {
|
||||
const teks = mizik ? mizik[0] : null
|
||||
const classes = useStyles()
|
||||
const theme = useTheme()
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
|
||||
const handleDrawerToggle = () => {
|
||||
setMobileOpen(!mobileOpen)
|
||||
}
|
||||
|
||||
const container = typeof window === 'undefined' ? undefined : () => window.document.body
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<CssBaseline />
|
||||
<AppBar position='fixed' className={classes.appBar}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color='inherit'
|
||||
aria-label='open drawer'
|
||||
edge='start'
|
||||
className={classes.menuButton}
|
||||
onClick={handleDrawerToggle}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
{teks ? (
|
||||
<>
|
||||
<Link href='/teks'>
|
||||
<IconButton aria-label='return' className={classes.button} size='small'>
|
||||
<KeyboardBackspaceIcon />
|
||||
</IconButton>
|
||||
</Link>
|
||||
<Typography noWrap variant='h6'>
|
||||
{teks.titre}
|
||||
</Typography>
|
||||
</>
|
||||
) : (
|
||||
<Typography noWrap variant='h6'>
|
||||
Dènyé Tèks
|
||||
</Typography>
|
||||
)}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<nav className={classes.drawer} aria-label='mailbox folders'>
|
||||
<Hidden smUp implementation='css'>
|
||||
<Drawer
|
||||
container={container}
|
||||
variant='temporary'
|
||||
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
|
||||
open={mobileOpen}
|
||||
classes={{
|
||||
paper: classes.drawerPaper
|
||||
}}
|
||||
ModalProps={{
|
||||
keepMounted: true
|
||||
}}
|
||||
onClose={handleDrawerToggle}
|
||||
>
|
||||
<DrawerBar setMobileOpen={setMobileOpen} miziks={miziks} mizik={mizik} />
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
<Hidden xsDown implementation='css'>
|
||||
<Drawer
|
||||
open
|
||||
classes={{
|
||||
paper: classes.drawerPaper
|
||||
}}
|
||||
variant='permanent'
|
||||
>
|
||||
<DrawerBar miziks={miziks} mizik={mizik} />
|
||||
</Drawer>
|
||||
</Hidden>
|
||||
</nav>
|
||||
<main className={classes.content}>
|
||||
{teks ? (
|
||||
<Grid container className={classes.grid} spacing={3}>
|
||||
<Grid item md className={classes.gridText}>
|
||||
<Typography align='center' className={classes.text} variant='h4'>
|
||||
Transcription
|
||||
</Typography>
|
||||
<Typography paragraph align='justify' component='span'>
|
||||
{formatJsonString(teks.transcription)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
{teks.traductions && (
|
||||
<Grid item md className={classes.gridText}>
|
||||
<Typography align='center' className={classes.text} variant='h4'>
|
||||
Traduction
|
||||
</Typography>
|
||||
<Typography paragraph align='justify' component='span'>
|
||||
{formatJsonString(teks.traductions.francais)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
) : (
|
||||
<DenyeTeks />
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
TeksDrawer.propTypes = {
|
||||
miziks: PropTypes.array.isRequired,
|
||||
mizik: PropTypes.array
|
||||
}
|
||||
|
||||
TeksDrawer.defaultProps = {
|
||||
mizik: null
|
||||
}
|
||||
Reference in New Issue
Block a user