ORGANISATION-KA-INTERNATIONALE/pawol.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use codemod jss-to-styled

Browse Source
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
2022-01-19 06:35:04 +04:00
parent 3b83cf93e9
commit 1afa1e5ba8
22 changed files with 693 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/awtis/awtis-kat.js
+27 -9
View File
@@ -15,27 +15,43 @@ import {
} from '@material-ui/core'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import MizikLis from './mizik-lis'
import AwtisBiyografi from './awtis-biyografi'
const useStyles = makeStyles(theme => ({
root: {
const PREFIX = 'awtis-kat'
const classes = {
root: `${PREFIX}-root`,
media: `${PREFIX}-media`,
expand: `${PREFIX}-expand`,
expandOpen: `${PREFIX}-expandOpen`
}
const Root = styled('div')((
{
theme
}
) => ({
[`& .${classes.root}`]: {
maxWidth: 345
},
media: {
[`& .${classes.media}`]: {
height: 240,
objectFit: 'contain'
},
expand: {
[`& .${classes.expand}`]: {
transform: 'rotate(0deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
[`& .${classes.expandOpen}`]: {
transform: 'rotate(180deg)'
}
}))
@@ -45,7 +61,7 @@ export default function AwtisKat({anAwtis}) {
const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
const {alias, biyografi, teks, foto} = anAwtis
const classes = useStyles()
const [expanded, setExpanded] = useState(false)
const handleExpandClick = () => {
@@ -57,7 +73,8 @@ export default function AwtisKat({anAwtis}) {
}
return (
<>
(
<Root>
<Grid item xs={12} sm={6} lg={4}>
<Card className={classes.root}>
<CardActionArea onClick={handleClick}>
@@ -106,7 +123,8 @@ export default function AwtisKat({anAwtis}) {
meteEsByografiOuve={meteEsByografiOuve}
/>
)}
</>
</Root>
)
)
}
components/awtis/mizik-badj-meni.js
+18 -7
View File
@@ -13,20 +13,31 @@ import {
Badge
} from '@material-ui/core'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import MenuBookIcon from '@material-ui/icons/MenuBook'
const useStyles = makeStyles(theme => ({
root: {
const PREFIX = 'mizik-badj-meni'
const classes = {
root: `${PREFIX}-root`,
paper: `${PREFIX}-paper`
}
const Root = styled('div')((
{
theme
}
) => ({
[`&.${classes.root}`]: {
display: 'flex'
},
paper: {
[`& .${classes.paper}`]: {
marginRight: theme.spacing(2)
}
}))
export default function MizikBadjMeni({teks}) {
const classes = useStyles()
const [open, setOpen] = useState(false)
const anchorRef = useRef(null)
const router = useRouter()
@@ -64,7 +75,7 @@ export default function MizikBadjMeni({teks}) {
}, [open])
return (
<div className={classes.root}>
<Root className={classes.root}>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
@@ -98,7 +109,7 @@ export default function MizikBadjMeni({teks}) {
</Grow>
)}
</Popper>
</div>
</Root>
)
}
components/awtis/mizik-lis.js
+15 -6
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types'
import {useRouter} from 'next/router'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import {List, ListItem, ListItemText} from '@material-ui/core'
import FiberNewOutlinedIcon from '@material-ui/icons/FiberNewOutlined'
import LibraryMusicIcon from '@material-ui/icons/LibraryMusic'
@@ -9,8 +9,18 @@ import ExplicitIcon from '@material-ui/icons/Explicit'
import {esBrandNew} from '../../lib/date'
const useStyles = makeStyles(theme => ({
root: {
const PREFIX = 'mizik-lis'
const classes = {
root: `${PREFIX}-root`
}
const StyledList = styled(List)((
{
theme
}
) => ({
[`&.${classes.root}`]: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper
@@ -18,7 +28,6 @@ const useStyles = makeStyles(theme => ({
}))
export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi, meteSlugTeksChwazi}) {
const classes = useStyles()
const router = useRouter()
const handleClick = slug => {
@@ -40,7 +49,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
}
return (
<List component='nav' className={classes.root} aria-label='mizik'>
<StyledList component='nav' className={classes.root} aria-label='mizik'>
{teks.map(({slug, tit, awtis, published_at, okiMizikID, eksplisit}) => (
<ListItem
key={slug}
@@ -61,7 +70,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
)}
</ListItem>
))}
</List>
</StyledList>
)
}
components/awtis/pajinasyon.js
+16 -6
View File
@@ -1,11 +1,21 @@
import PropTypes from 'prop-types'
import {useRouter} from 'next/router'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import Pagination from '@material-ui/lab/Pagination'
import {Grid} from '@material-ui/core'
const useStyles = makeStyles(theme => ({
root: {
const PREFIX = 'pajinasyon'
const classes = {
root: `${PREFIX}-root`
}
const StyledGrid = styled(Grid)((
{
theme
}
) => ({
[`& .${classes.root}`]: {
'& > *': {
marginBottom: theme.spacing(2)
}
@@ -14,7 +24,7 @@ const useStyles = makeStyles(theme => ({
export default function Pajinasyon({pajTotal, paj}) {
const router = useRouter()
const classes = useStyles()
const handleChange = (event, value) => {
const href = `/awtis?paj&paj=${value}`
const as = `/awtis/paj/${value}`
@@ -22,11 +32,11 @@ export default function Pajinasyon({pajTotal, paj}) {
}
return (
<Grid container justify='center'>
<StyledGrid container justify='center'>
<div className={classes.root}>
<Pagination size='small' page={paj} count={pajTotal} color='primary' onChange={handleChange} />
</div>
</Grid>
</StyledGrid>
)
}
components/cgu/cgu-dialog.js
+13 -7
View File
@@ -1,19 +1,25 @@
import {useRef, useEffect} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import {Button, Dialog, DialogActions, DialogContent, DialogTitle, makeStyles, Typography} from '@material-ui/core'
import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@material-ui/core'
import {useRouter} from 'next/router'
import Cgu from '.'
const CGU_DOWNLOAD_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK
const PREFIX = 'cgu-dialog'
const useStyles = makeStyles(() => ({
dialog: {
const classes = {
dialog: `${PREFIX}-dialog`
}
const Root = styled('div')(() => ({
[`& .${classes.dialog}`]: {
zIndex: 9999
}
}))
const CGU_DOWNLOAD_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK
export default function CGUDialog({open, setOpen}) {
const classes = useStyles()
const router = useRouter()
const handleClose = () => {
@@ -36,7 +42,7 @@ export default function CGUDialog({open, setOpen}) {
}, [open])
return (
<div>
<Root>
<Dialog
open={open}
scroll='paper'
@@ -65,7 +71,7 @@ export default function CGUDialog({open, setOpen}) {
</Button>
</DialogActions>
</Dialog>
</div>
</Root>
)
}
components/cgu/index.js
+12 -7
View File
@@ -1,17 +1,22 @@
import {List, ListItem, ListItemText, Link, makeStyles, Typography, ListItemIcon} from '@material-ui/core'
import {List, ListItem, ListItemText, Link, Typography, ListItemIcon} from '@material-ui/core'
import {styled} from '@mui/material/styles'
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'
const useStyles = makeStyles({
root: {
const PREFIX = 'index'
const classes = {
root: `${PREFIX}-root`
}
const Root = styled('div')({
[`&.${classes.root}`]: {
textAlign: 'justify'
}
})
export default function Cgu() {
const classes = useStyles()
return (
<div className={classes.root}>
<Root className={classes.root}>
<Typography gutterBottom variant='h5' component='h2'>
Définitions
</Typography>
@@ -436,6 +441,6 @@ export default function Cgu() {
<Typography gutterBottom variant='caption' >
Dernières modifications le 15/06/2021
</Typography>
</div>
</Root>
)
}
components/footer.js
+21 -7
View File
@@ -1,25 +1,38 @@
import {useState} from 'react'
import {Container, Link, makeStyles, Typography} from '@material-ui/core'
import {styled} from '@mui/material/styles'
import {Container, Link, Typography} from '@material-ui/core'
import CGUDialog from './cgu/cgu-dialog'
const useStyles = makeStyles(theme => ({
footer: {
const PREFIX = 'footer'
const classes = {
footer: `${PREFIX}-footer`,
text: `${PREFIX}-text`
}
const Root = styled('div')((
{
theme
}
) => ({
[`& .${classes.footer}`]: {
padding: theme.spacing(3, 2),
marginTop: 'auto',
backgroundColor:
theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
},
text: {
[`& .${classes.text}`]: {
fontWeight: 'bold'
}
}))
export default function Footer() {
const classes = useStyles()
const [open, setOpen] = useState(false)
return (
<>
(
<Root>
<CGUDialog open={open} setOpen={setOpen} />
<footer id='cgu' className={classes.footer}>
<Container>
@@ -30,6 +43,7 @@ export default function Footer() {
</Typography>
</Container>
</footer>
</>
</Root>
)
)
}
components/kat-kay-la.js
+17 -9
View File
@@ -7,31 +7,39 @@ import {
Typography,
Grid
} from '@material-ui/core'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
const useStyles = makeStyles({
root: {
const PREFIX = 'kat-kay-la'
const classes = {
root: `${PREFIX}-root`,
bullet: `${PREFIX}-bullet`,
title: `${PREFIX}-title`,
pos: `${PREFIX}-pos`
}
const StyledGrid = styled(Grid)({
[`& .${classes.root}`]: {
minWidth: 275
},
bullet: {
[`& .${classes.bullet}`]: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)'
},
title: {
[`& .${classes.title}`]: {
fontSize: 14
},
pos: {
[`& .${classes.pos}`]: {
marginBottom: 12
}
})
export default function KatKayLa({tit, soutit, kantite, route}) {
const classes = useStyles()
const router = useRouter()
return (
<Grid item xs={12} md={6}>
<StyledGrid item xs={12} md={6}>
<Card className={classes.root} variant='outlined'>
<CardActionArea onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}>
<CardContent>
@@ -47,7 +55,7 @@ export default function KatKayLa({tit, soutit, kantite, route}) {
</CardContent>
</CardActionArea>
</Card>
</Grid>
</StyledGrid>
)
}
components/komante/komante-list.js
+18 -8
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types'
import {format} from 'date-fns'
import {fr} from 'date-fns/locale'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import {
Typography,
@@ -12,22 +12,32 @@ import {
import {formatJsonString} from '../../lib/utils/format'
const useStyles = makeStyles(theme => ({
root: {
const PREFIX = 'komante-list'
const classes = {
root: `${PREFIX}-root`,
inline: `${PREFIX}-inline`
}
const StyledList = styled(List)((
{
theme
}
) => ({
[`&.${classes.root}`]: {
width: '100%',
maxWidth: '36ch',
backgroundColor: theme.palette.background.paper
},
inline: {
[`& .${classes.inline}`]: {
display: 'inline'
}
}))
export default function KomanteList({komante}) {
const classes = useStyles()
return (
<List className={classes.root}>
<StyledList className={classes.root}>
{komante.map(({_id, username, kontni, sentAt}) => (
<div key={_id}>
<ListItemText
@@ -48,7 +58,7 @@ export default function KomanteList({komante}) {
<Divider style={{marginBottom: '1em'}} />
</div>
))}
</List>
</StyledList>
)
}
components/komante/vwe-komante.js
+31 -15
View File
@@ -1,4 +1,5 @@
import {useState, useEffect, useRef} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import {useSession} from 'next-auth/client'
@@ -11,9 +12,7 @@ import {
Button,
Typography,
Tooltip,
Zoom,
withStyles,
makeStyles
Zoom
} from '@material-ui/core'
import AddCommentIcon from '@material-ui/icons/AddComment'
import {useRouter} from 'next/router'
@@ -21,23 +20,31 @@ import Koneksyon from '../sesyon/koneksyon'
import KomanteList from './komante-list'
import EkriKomante from './ekri-komante'
const useStyles = makeStyles(theme => ({
margin: {
const PREFIX = 'vwe-komante'
const classes = {
tooltip: `${PREFIX}-tooltip`,
margin: `${PREFIX}-margin`,
extendedIcon: `${PREFIX}-extendedIcon`
}
const Root = styled('div')((
{
theme
}
) => ({
[`& .${classes.margin}`]: {
margin: theme.spacing(1)
},
extendedIcon: {
[`& .${classes.extendedIcon}`]: {
marginRight: theme.spacing(1)
}
}))
const KomanteTooltip = withStyles(() => ({
tooltip: {
fontSize: 18
}
}))(Tooltip)
const KomanteTooltip = Tooltip
export default function VweKomante({komante, teks}) {
const classes = useStyles()
const [esOuve, meteEsOuve] = useState(false)
const [esKoneksyonOuve, meteEsKoneksyonOuve] = useState(false)
const [esKomenteOuve, meteEsKomanteOuve] = useState(false)
@@ -63,8 +70,16 @@ export default function VweKomante({komante, teks}) {
}, [esOuve])
return (
<>
<KomanteTooltip title='Komantè' placement='bottom' TransitionComponent={Zoom}>
(
<Root>
<KomanteTooltip
title='Komantè'
placement='bottom'
TransitionComponent={Zoom}
classes={{
tooltip: classes.tooltip
}}
>
<IconButton className={classes.margin} color='primary' aria-label='commentaire' component='span' onClick={handleClick}>
<AddCommentIcon />
</IconButton>
@@ -122,7 +137,8 @@ export default function VweKomante({komante, teks}) {
</>
)}
</Dialog>
</>
</Root>
)
)
}
components/navigasyon.js
+23 -13
View File
@@ -2,7 +2,7 @@ import {useState} from 'react'
import PropTypes from 'prop-types'
import {useRouter} from 'next/router'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import AppBar from '@material-ui/core/AppBar'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'
@@ -13,6 +13,25 @@ import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
import Typography from '@material-ui/core/Typography'
import Box from '@material-ui/core/Box'
const PREFIX = 'navigasyon'
const classes = {
root: `${PREFIX}-root`
}
const Root = styled('div')((
{
theme
}
) => ({
[`& .${classes.root}`]: {
marginBottom: 50,
flexGrow: 1,
width: '100%',
backgroundColor: theme.palette.background.paper
}
}))
const tabRouteHref = [
'/',
'/teks',
@@ -31,7 +50,7 @@ function TabPanel(props) {
const {children, value, index, ...other} = props
return (
<div
<Root
role='tabpanel'
hidden={value !== index}
id={`scrollable-force-tabpanel-${index}`}
@@ -43,7 +62,7 @@ function TabPanel(props) {
<Typography component='div'>{children}</Typography>
</Box>
)}
</div>
</Root>
)
}
@@ -60,18 +79,9 @@ function a11yProps(index) {
}
}
const useStyles = makeStyles(theme => ({
root: {
marginBottom: 50,
flexGrow: 1,
width: '100%',
backgroundColor: theme.palette.background.paper
}
}))
export default function Navigasyon({selectedTab}) {
const router = useRouter()
const classes = useStyles()
const [value, setValue] = useState(0)
const handleChange = (event, newValue) => {
components/rezo-menu.js
+46 -19
View File
@@ -1,14 +1,38 @@
import {useRef, useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import {useRouter} from 'next/router'
import {Button, ListItemIcon, ListItemText, Menu, MenuItem, withStyles} from '@material-ui/core'
import {Button, ListItemIcon, ListItemText, Menu, MenuItem} from '@material-ui/core'
import PublicIcon from '@material-ui/icons/Public'
const StyledMenu = withStyles({
paper: {
border: '1px solid #d3d4d5'
const PREFIX = 'rezo-menu'
const classes = {
paper: `${PREFIX}-paper`,
root: `${PREFIX}-root`
}
const Root = styled('div')((
{
theme
}
})(props => (
) => ({
[`& .${classes.paper}`]: {
border: '1px solid #d3d4d5'
},
[`& .${classes.root}`]: {
'&:hover': {
backgroundColor: theme.palette.primary.main,
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
color: theme.palette.common.white
}
}
}
}))
function StyledMenu(props) {
return (
<Menu
elevation={0}
getContentAnchorEl={null}
@@ -22,18 +46,10 @@ const StyledMenu = withStyles({
}}
{...props}
/>
))
)
}
const StyledMenuItem = withStyles(theme => ({
root: {
'&:hover': {
backgroundColor: theme.palette.primary.main,
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
color: theme.palette.common.white
}
}
}
}))(MenuItem)
const StyledMenuItem = MenuItem
const siteDomain = process.env.NEXT_PUBLIC_PROD_DOMAIN || 'localhost'
@@ -57,7 +73,8 @@ export default function RezoMenu({data}) {
}
return (
<>
(
<Root>
<Button
ref={anchorRef}
startIcon={<PublicIcon />}
@@ -75,10 +92,19 @@ export default function RezoMenu({data}) {
id='customized-menu'
anchorEl={anchorElement}
open={Boolean(anchorElement)}
classes={{
paper: classes.paper
}}
onClose={handleClose}
>
{data.map(({id, tit, icon, link}) => (
<StyledMenuItem key={id} onClick={() => handleClose(id, link)}>
<StyledMenuItem
key={id}
classes={{
root: classes.root
}}
onClick={() => handleClose(id, link)}
>
<ListItemIcon>
{icon}
</ListItemIcon>
@@ -86,7 +112,8 @@ export default function RezoMenu({data}) {
</StyledMenuItem>
))}
</StyledMenu>
</>
</Root>
)
)
}
components/sesyon/dekoneksyon.js
+26 -14
View File
@@ -1,30 +1,33 @@
import {useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import Link from 'next/link'
import {signOut} from 'next-auth/client'
import {withStyles, makeStyles, Tooltip, Fab, Zoom} from '@material-ui/core'
import {Tooltip, Fab, Zoom} from '@material-ui/core'
import ExitToAppIcon from '@material-ui/icons/ExitToApp'
import Alet from '../alet'
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
const PREFIX = 'Dekoneksyon'
const useStyles = makeStyles(() => ({
dekoneksyon: {
const classes = {
tooltip: `${PREFIX}-tooltip`,
dekoneksyon: `${PREFIX}-dekoneksyon`
}
const Root = styled('div')(() => ({
[`& .${classes.dekoneksyon}`]: {
position: props => props.position,
top: props => props.top,
left: props => props.left
}
}))
const DekoneksonTooltip = withStyles(() => ({
tooltip: {
fontSize: 18
}
}))(Tooltip)
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
const classes = useStyles(props)
const DekoneksonTooltip = Tooltip
function Dekoneksyon({chimen, tooltipPlacement}) {
const [esOuve, meteEsOuve] = useState(false)
const handleDekonekte = event => {
@@ -33,9 +36,17 @@ function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
}
return (
<>
(
<Root>
<Link passHref href='/api/auth/signout'>
<DekoneksonTooltip title='Dékoneksyon' placement={tooltipPlacement} TransitionComponent={Zoom}>
<DekoneksonTooltip
title='Dékoneksyon'
placement={tooltipPlacement}
TransitionComponent={Zoom}
classes={{
tooltip: classes.tooltip
}}
>
<Fab
className={classes.dekoneksyon}
color='secondary'
@@ -48,7 +59,8 @@ function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
</DekoneksonTooltip>
</Link>
<Alet esOuve={esOuve} meteEsOuve={meteEsOuve} handleKonfime={handleDekonekte} />
</>
</Root>
)
)
}
components/soumet/ajoute-tradiksyon.js
+58 -21
View File
@@ -1,13 +1,37 @@
import {useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import {MenuItem, withStyles, Menu, Button} from '@material-ui/core'
import {MenuItem, Menu, Button} from '@material-ui/core'
import {uniq} from 'lodash'
const StyledMenu = withStyles({
paper: {
border: '1px solid #d3d4d5'
const PREFIX = 'AjouteTradiksyon'
const classes = {
paper: `${PREFIX}-paper`,
root: `${PREFIX}-root`
}
const Root = styled('div')((
{
theme
}
})(props => (
) => ({
[`& .${classes.paper}`]: {
border: '1px solid #d3d4d5'
},
[`& .${classes.root}`]: {
'&:focus': {
backgroundColor: theme.palette.primary.main,
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
color: theme.palette.common.white
}
}
}
}))
function StyledMenu(props) {
return (
<Menu
elevation={0}
getContentAnchorEl={null}
@@ -21,18 +45,10 @@ const StyledMenu = withStyles({
}}
{...props}
/>
))
)
}
const StyledMenuItem = withStyles(theme => ({
root: {
'&:focus': {
backgroundColor: theme.palette.primary.main,
'& .MuiListItemIcon-root, & .MuiListItemText-primary': {
color: theme.palette.common.white
}
}
}
}))(MenuItem)
const StyledMenuItem = MenuItem
function AjouteTradiksyon({chwaLang, setChwaLang}) {
const [anchorElement, setAnchorElement] = useState(null)
@@ -48,7 +64,7 @@ function AjouteTradiksyon({chwaLang, setChwaLang}) {
}
return (
<div style={{textAlign: 'center', marginTop: 5}}>
<Root style={{textAlign: 'center', marginTop: 5}}>
<Button
aria-controls='lang-menu'
variant='outlined'
@@ -62,13 +78,34 @@ function AjouteTradiksyon({chwaLang, setChwaLang}) {
id='lang-menu'
anchorEl={anchorElement}
open={Boolean(anchorElement)}
classes={{
paper: classes.paper
}}
onClose={handleClose}
>
<StyledMenuItem id='fr' onClick={handleClose}>🇫🇷 Français</StyledMenuItem>
<StyledMenuItem id='en' onClick={handleClose}>🇬🇧 English</StyledMenuItem>
<StyledMenuItem id='es' onClick={handleClose}>🇪🇸 Español</StyledMenuItem>
<StyledMenuItem
id='fr'
classes={{
root: classes.root
}}
onClick={handleClose}
>🇫🇷 Français</StyledMenuItem>
<StyledMenuItem
id='en'
classes={{
root: classes.root
}}
onClick={handleClose}
>🇬🇧 English</StyledMenuItem>
<StyledMenuItem
id='es'
classes={{
root: classes.root
}}
onClick={handleClose}
>🇪🇸 Español</StyledMenuItem>
</StyledMenu>
</div>
</Root>
)
}
components/soumet/ekri-teks.js
+24 -10
View File
@@ -1,4 +1,5 @@
import {useCallback, useEffect, useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import axios from 'axios'
import {
@@ -16,14 +17,25 @@ import {
Snackbar,
TextField,
Tooltip,
Typography,
withStyles
Typography
} from '@material-ui/core'
import MuiAlert from '@material-ui/lab/Alert'
import CloseIcon from '@material-ui/icons/Close'
import AjouteTradiksyon from './ajoute-tradiksyon'
const PREFIX = 'EkriTeks'
const classes = {
tooltip: `${PREFIX}-tooltip`
}
const StyledContainer = styled(Container)(() => ({
[`& .${classes.tooltip}`]: {
fontSize: 18
}
}))
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
const textLabels = {
@@ -48,11 +60,7 @@ function Alert(props) {
return <MuiAlert elevation={6} variant='filled' {...props} />
}
const RemoveTooltip = withStyles(() => ({
tooltip: {
fontSize: 18
}
}))(Tooltip)
const RemoveTooltip = Tooltip
function EkriTeks({session}) {
const {jwt, user} = session
@@ -160,7 +168,7 @@ function EkriTeks({session}) {
}, [error])
return (
<Container maxWidth='sm'>
<StyledContainer maxWidth='sm'>
<Box align='center' marginBottom={2}>
<Typography display='inline' variant='h5' component='h1'>
Soumèt an tèks
@@ -224,7 +232,13 @@ function EkriTeks({session}) {
rows={8}
endAdornment={
<InputAdornment position='end'>
<RemoveTooltip title='Effacer la traduction' placement='left'>
<RemoveTooltip
title='Effacer la traduction'
placement='left'
classes={{
tooltip: classes.tooltip
}}
>
<IconButton
color='secondary'
style={{bottom: 75}}
@@ -273,7 +287,7 @@ function EkriTeks({session}) {
</Alert>
</Snackbar>
)}
</Container>
</StyledContainer>
)
}
components/switch-theme.js
+15 -8
View File
@@ -1,17 +1,25 @@
import PropTypes from 'prop-types'
import {styled} from '@mui/material/styles'
import WbSunnyIcon from '@material-ui/icons/WbSunny'
import Brightness3Icon from '@material-ui/icons/Brightness3'
import {Box, makeStyles} from '@material-ui/core'
import {Box} from '@material-ui/core'
const useStyles = makeStyles({
switch: {
const PREFIX = 'switch-theme'
const classes = {
switch: `${PREFIX}-switch`,
switchFixed: `${PREFIX}-switchFixed`
}
const StyledBox = styled(Box)({
[`& .${classes.switch}`]: {
position: 'absolute',
right: '1em',
top: '95px',
top: '200px',
zIndex: 1,
cursor: 'pointer'
},
switchFixed: {
[`& .${classes.switchFixed}`]: {
position: 'fixed',
right: '1em',
top: '95px',
@@ -21,20 +29,19 @@ const useStyles = makeStyles({
})
export default function SwitchTheme({switchFixed, darkMode, setDarkMode}) {
const classes = useStyles()
const handleClick = () => {
localStorage.setItem('oki-dark', !darkMode)
setDarkMode(!darkMode)
}
return (
<Box className={switchFixed ? classes.switchFixed : classes.switch}>
<StyledBox className={switchFixed ? classes.switchFixed : classes.switch}>
{darkMode ? (
<WbSunnyIcon onClick={handleClick} />
) : (
<Brightness3Icon onClick={handleClick} />
)}
</Box>
</StyledBox>
)
}
components/teks/denye-teks.js
+13 -6
View File
@@ -1,15 +1,22 @@
import {Container, Grid, makeStyles} from '@material-ui/core'
import {Container, Grid} from '@material-ui/core'
import {styled} from '@mui/material/styles'
import TeksKat from './teks-kat'
const useStyles = makeStyles(() => ({
container: {
const PREFIX = 'denye-teks'
const classes = {
container: `${PREFIX}-container`
}
const Root = styled('div')(() => ({
[`&.${classes.container}`]: {
marginTop: '3em'
}
}))
export default function DenyeTeks(teks) {
const classes = useStyles()
const teksKlasePaPibilikasyon = Object.values(teks).sort((a, b) => {
const aDate = new Date(a.published_at)
const bDate = new Date(b.published_at)
@@ -17,12 +24,12 @@ export default function DenyeTeks(teks) {
}).slice(0, 6)
return (
<div className={classes.container}>
<Root className={classes.container}>
<Container>
<Grid container spacing={3}>
{teksKlasePaPibilikasyon.map(t => <TeksKat key={t._id} teks={t} />)}
</Grid>
</Container>
</div>
</Root>
)
}
components/teks/drawer-bar.js
+25 -10
View File
@@ -1,4 +1,5 @@
import {useState} from 'react'
import {styled} from '@mui/material/styles'
import PropTypes from 'prop-types'
import union from 'lodash.union'
import deburr from 'lodash.deburr'
@@ -7,23 +8,38 @@ import {
Divider,
FormControl,
InputAdornment,
InputBase,
makeStyles
InputBase
} 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: {
const PREFIX = 'drawer-bar'
const classes = {
toolbar: `${PREFIX}-toolbar`,
list: `${PREFIX}-list`,
form: `${PREFIX}-form`,
text: `${PREFIX}-text`
}
const Root = styled('div')((
{
theme
}
) => ({
[`& .${classes.toolbar}`]: theme.mixins.toolbar,
[`& .${classes.list}`]: {
marginBottom: '6em'
},
form: {
[`& .${classes.form}`]: {
marginLeft: theme.spacing(1)
},
text: {
[`& .${classes.text}`]: {
marginBottom: '0.5em'
}
}))
@@ -46,7 +62,6 @@ const getMizikFiltered = (teks, filter) => {
export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
const slug = anTeks ? anTeks.slug : null
const classes = useStyles()
const [search, setSearch] = useState('')
const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
@@ -60,7 +75,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
}
return (
<div className='search'>
<Root className='search'>
<FormControl className={classes.form}>
<InputBase
className={classes.toolbar}
@@ -84,7 +99,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
meteSlugTeksChwazi={meteSlugTeksChwazi}
/>
</div>
</div>
</Root>
)
}
components/teks/pataje.js
+14 -9
View File
@@ -1,7 +1,7 @@
import {useState} from 'react'
import PropTypes from 'prop-types'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import SpeedDial from '@material-ui/lab/SpeedDial'
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'
import SpeedDialAction from '@material-ui/lab/SpeedDialAction'
@@ -10,24 +10,29 @@ import ShareIcon from '@material-ui/icons/Share'
import TwitterIcon from '@material-ui/icons/Twitter'
import {Backdrop} from '@material-ui/core'
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL
const TWITTER_HASHTAGS = process.env.NEXT_PUBLIC_TWITTER_HASHTAGS || 'OKi'
const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
const PREFIX = 'pataje'
const useStyles = makeStyles(() => ({
root: {
const classes = {
root: `${PREFIX}-root`
}
const Root = styled('div')(() => ({
[`&.${classes.root}`]: {
height: 0,
transform: 'translateZ(0px)'
}
}))
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL
const TWITTER_HASHTAGS = process.env.NEXT_PUBLIC_TWITTER_HASHTAGS || 'OKi'
const TWITTER_USERNAME = process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'
const actions = [
{icon: <TwitterIcon />, name: 'Twitter', code: 'twitter'},
{icon: <FileCopyIcon />, name: 'Copier le lien', code: 'copy'}
]
export default function Pataje({teks, setError, setSuccess}) {
const classes = useStyles()
const {tit, awtis, slug} = teks
const [open, setOpen] = useState(false)
@@ -62,7 +67,7 @@ export default function Pataje({teks, setError, setSuccess}) {
}
return (
<div className={classes.root}>
<Root className={classes.root}>
<Backdrop open={open} />
<SpeedDial
FabProps={{size: 'small', margin: 'auto', color: 'default'}}
@@ -83,7 +88,7 @@ export default function Pataje({teks, setError, setSuccess}) {
/>
))}
</SpeedDial>
</div>
</Root>
)
}
components/teks/teks-drawer.js
+73 -34
View File
@@ -17,8 +17,7 @@ import {
useMediaQuery,
Snackbar,
Tooltip,
Zoom,
withStyles
Zoom
} from '@material-ui/core'
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
@@ -26,7 +25,7 @@ import ExplicitIcon from '@material-ui/icons/Explicit'
import MenuIcon from '@material-ui/icons/Menu'
import {makeStyles, useTheme} from '@material-ui/core/styles'
import {useTheme, styled} from '@material-ui/core/styles'
import MuiAlert from '@material-ui/lab/Alert'
import {formatJsonString} from '../../lib/utils/format'
@@ -41,24 +40,45 @@ import OkiMizik from './oki-mizik'
import Pataje from './pataje'
import EntegreMizik from './entegre-mizik'
function Alert(props) {
return <MuiAlert elevation={6} variant='filled' {...props} />
const PREFIX = 'teks-drawer'
const classes = {
tooltip: `${PREFIX}-tooltip`,
root: `${PREFIX}-root`,
drawer: `${PREFIX}-drawer`,
appBar: `${PREFIX}-appBar`,
menuButton: `${PREFIX}-menuButton`,
toolbar: `${PREFIX}-toolbar`,
drawerPaper: `${PREFIX}-drawerPaper`,
content: `${PREFIX}-content`,
list: `${PREFIX}-list`,
form: `${PREFIX}-form`,
text: `${PREFIX}-text`,
gridText: `${PREFIX}-gridText`,
grid: `${PREFIX}-grid`,
koute: `${PREFIX}-koute`,
vwe: `${PREFIX}-vwe`,
pataje: `${PREFIX}-pataje`
}
const drawerWidth = 240
const useStyles = makeStyles(theme => ({
root: {
const Root = styled('div')((
{
theme
}
) => ({
[`&.${classes.root}`]: {
display: 'flex'
},
drawer: {
[`& .${classes.drawer}`]: {
marginTop: '10em',
[theme.breakpoints.up('sm')]: {
width: drawerWidth,
flexShrink: 0
}
},
appBar: {
[`& .${classes.appBar}`]: {
borderTop: '2px solid #303030',
marginTop: '4.71rem',
[theme.breakpoints.up('sm')]: {
@@ -67,40 +87,50 @@ const useStyles = makeStyles(theme => ({
},
zIndex: 1
},
menuButton: {
[`& .${classes.menuButton}`]: {
[theme.breakpoints.up('sm')]: {
display: 'none'
}
},
toolbar: theme.mixins.toolbar,
drawerPaper: {
[`& .${classes.toolbar}`]: theme.mixins.toolbar,
[`& .${classes.drawerPaper}`]: {
borderTop: '2px solid #303030',
marginTop: '4.71rem',
width: drawerWidth
},
content: {
[`& .${classes.content}`]: {
flexGrow: 1,
padding: theme.spacing(3)
},
list: {
[`& .${classes.list}`]: {
marginBottom: '6em'
},
form: {
[`& .${classes.form}`]: {
marginLeft: theme.spacing(1)
},
text: {
[`& .${classes.text}`]: {
marginBottom: '0.5em'
},
gridText: {
[`& .${classes.gridText}`]: {
border: '2px solid grey',
borderRadius: '5px',
marginTop: '2em',
padding: '1em'
},
grid: {
[`& .${classes.grid}`]: {
marginTop: '1em'
},
koute: {
[`& .${classes.koute}`]: {
position: 'absolute',
right: '40px',
top: '8px',
@@ -108,7 +138,8 @@ const useStyles = makeStyles(theme => ({
top: '10px'
}
},
vwe: {
[`& .${classes.vwe}`]: {
position: 'absolute',
right: '90px',
top: '8px',
@@ -116,7 +147,8 @@ const useStyles = makeStyles(theme => ({
top: '10px'
}
},
pataje: {
[`& .${classes.pataje}`]: {
position: 'fixed',
top: '85px',
left: '110px',
@@ -128,6 +160,12 @@ const useStyles = makeStyles(theme => ({
}
}))
function Alert(props) {
return <MuiAlert elevation={6} variant='filled' {...props} />
}
const drawerWidth = 240
const langToArray = anTeks => {
const langArray = []
@@ -168,13 +206,7 @@ const alignTeks = (langArray, isMobile) => {
}
}
const ExplicitTooltip = withStyles(() => ({
tooltip: {
fontSize: 18,
fontWeight: 'bold',
backgroundColor: 'rgba(245, 0, 87, 0.8)'
}
}))(Tooltip)
const ExplicitTooltip = Tooltip
export default function TeksDrawer({teks, anTeks, komante}) {
const [session] = useSession()
@@ -182,7 +214,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
const isMobile = useMediaQuery('(max-width:800px)')
const langArray = langToArray(anTeks)
const classes = useStyles()
const theme = useTheme()
const [esMobilOuve, meteEsMobilOuve] = useState(false)
const [open, setOpen] = useState(false)
@@ -212,7 +244,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
}, [error, success, setOpen])
return (
<div className={classes.root}>
<Root className={classes.root}>
<CssBaseline />
<AppBar position='fixed' className={classes.appBar}>
<Toolbar>
@@ -294,7 +326,14 @@ export default function TeksDrawer({teks, anTeks, komante}) {
<Typography variant='h5'>
{anTeks.tit}
{anTeks.eksplisit && (
<ExplicitTooltip title='Explicit Lyrics' placement='bottom' TransitionComponent={Zoom}>
<ExplicitTooltip
title='Explicit Lyrics'
placement='bottom'
TransitionComponent={Zoom}
classes={{
tooltip: classes.tooltip
}}
>
<ExplicitIcon style={{marginLeft: 10}} color='secondary' />
</ExplicitTooltip>
)}
@@ -375,7 +414,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
<DenyeTeks {...teks} />
)}
</main>
</div>
</Root>
)
}
components/teks/teks-kat.js
+13 -7
View File
@@ -11,20 +11,26 @@ import {
Grid
} from '@material-ui/core'
import ExplicitIcon from '@material-ui/icons/Explicit'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
const useStyles = makeStyles({
root: {
const PREFIX = 'teks-kat'
const classes = {
root: `${PREFIX}-root`,
media: `${PREFIX}-media`
}
const StyledGrid = styled(Grid)({
[`& .${classes.root}`]: {
maxWidth: 345
},
media: {
[`& .${classes.media}`]: {
height: 240,
objectFit: 'contain'
}
})
export default function TeksKat({teks}) {
const classes = useStyles()
const router = useRouter()
const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
const {tit, awtis, lanne, kouveti, published_at, slug} = teks
@@ -35,7 +41,7 @@ export default function TeksKat({teks}) {
}
return (
<Grid item sm={12} md={6} lg={4}>
<StyledGrid item sm={12} md={6} lg={4}>
<Card className={classes.root}>
<CardActionArea onClick={() => handleClick(slug)}>
<CardMedia
@@ -71,7 +77,7 @@ export default function TeksKat({teks}) {
</CardContent>
</CardActionArea>
</Card>
</Grid>
</StyledGrid>
)
}
components/teks/vwe-koute-achte.js
+11 -6
View File
@@ -17,11 +17,17 @@ import VideocamIcon from '@material-ui/icons/Videocam'
import MusicNoteIcon from '@material-ui/icons/MusicNote'
import AlbumIcon from '@material-ui/icons/Album'
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@material-ui/lab'
const useStyles = makeStyles(() => ({
root: {
const PREFIX = 'vwe-koute-achte'
const classes = {
root: `${PREFIX}-root`
}
const Root = styled('div')(() => ({
[`&.${classes.root}`]: {
height: 0,
transform: 'translateZ(0px)'
}
@@ -47,7 +53,6 @@ const vweyIcons = {
}
export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
const classes = useStyles()
const [ouve, meteOuve] = useState(false)
const {kouteyAchtey, lyen} = anTeks
@@ -76,7 +81,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
}
return (
<div className={classes.root}>
<Root className={classes.root}>
<SpeedDial
color='secondary'
FabProps={{size: 'small', margin: 'auto', color: 'default'}}
@@ -105,7 +110,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
/>
))}
</SpeedDial>
</div>
</Root>
)
}