Sélecteur de langue : regroupement par continent, Afrique en tête #6
+59
-44
@@ -3,7 +3,10 @@
|
||||
import {useEffect, useState} from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Box from '@mui/material/Box'
|
||||
import Chip from '@mui/material/Chip'
|
||||
import Select from '@mui/material/Select'
|
||||
import MenuItem from '@mui/material/MenuItem'
|
||||
import ListSubheader from '@mui/material/ListSubheader'
|
||||
import FormControl from '@mui/material/FormControl'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Tooltip from '@mui/material/Tooltip'
|
||||
import {useMediaQuery} from '@mui/material'
|
||||
@@ -12,6 +15,8 @@ import slugify from 'slugify'
|
||||
|
||||
import {styled} from '@mui/material/styles'
|
||||
import ExplicitIcon from '@mui/icons-material/Explicit'
|
||||
import TranslateIcon from '@mui/icons-material/Translate'
|
||||
import StarIcon from '@mui/icons-material/Star'
|
||||
|
||||
import Image from 'next/image'
|
||||
|
||||
@@ -92,11 +97,11 @@ const CONTINENTS = ['Afrique', 'Asie', 'Europe']
|
||||
|
||||
const TRAD_FIELDS = [
|
||||
// Afrique — langues vedettes en premier
|
||||
{field: 'yoruba', title: 'Yorùbá', continent: 'Afrique'},
|
||||
{field: 'lingala', title: 'Lingála', continent: 'Afrique'},
|
||||
{field: 'wolof', title: 'Wolof', continent: 'Afrique'},
|
||||
{field: 'swahili', title: 'Kiswahili', continent: 'Afrique'},
|
||||
{field: 'hausa', title: 'Hausa', continent: 'Afrique'},
|
||||
{field: 'yoruba', title: 'Yorùbá', continent: 'Afrique', vedette: true},
|
||||
{field: 'lingala', title: 'Lingála', continent: 'Afrique', vedette: true},
|
||||
{field: 'wolof', title: 'Wolof', continent: 'Afrique', vedette: true},
|
||||
{field: 'swahili', title: 'Kiswahili', continent: 'Afrique', vedette: true},
|
||||
{field: 'hausa', title: 'Hausa', continent: 'Afrique', vedette: true},
|
||||
{field: 'arabe', title: 'العربية', continent: 'Afrique'},
|
||||
{field: 'oromo', title: 'Oromoo', continent: 'Afrique'},
|
||||
{field: 'igbo', title: 'Igbo', continent: 'Afrique'},
|
||||
@@ -125,7 +130,7 @@ const langToArray = parole => {
|
||||
|
||||
return TRAD_FIELDS
|
||||
.filter(({field}) => parole.traductions[field])
|
||||
.map(({field, title, continent}) => ({field, title, continent, lang: parole.traductions[field]}))
|
||||
.map(({field, title, continent, vedette}) => ({field, title, continent, vedette, lang: parole.traductions[field]}))
|
||||
}
|
||||
|
||||
const BROWSER_LANG_TO_FIELD = {
|
||||
@@ -268,45 +273,55 @@ export default function Teks({parole}) {
|
||||
)}
|
||||
</Box>
|
||||
<Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
|
||||
<Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5, borderBottom: 1, borderColor: 'divider', mb: 2, pb: 2}}>
|
||||
<Chip
|
||||
clickable
|
||||
color='primary'
|
||||
label='Transcription'
|
||||
sx={{fontWeight: tab === 0 ? 600 : 400}}
|
||||
variant={tab === 0 ? 'filled' : 'outlined'}
|
||||
onClick={() => setTab(0)}
|
||||
/>
|
||||
{CONTINENTS.map(continent => {
|
||||
const items = langArray
|
||||
.map((item, index) => ({...item, index}))
|
||||
.filter(item => item.continent === continent)
|
||||
<Box sx={{display: 'flex', justifyContent: 'center', borderBottom: 1, borderColor: 'divider', mb: 2, pb: 2}}>
|
||||
<FormControl size='small' sx={{minWidth: 240, width: isMobile ? '100%' : 'auto'}}>
|
||||
<Select
|
||||
value={tab}
|
||||
MenuProps={{PaperProps: {sx: {maxHeight: 420}}}}
|
||||
renderValue={value => {
|
||||
const label = value === 0 ? 'Transcription' : langArray[value - 1]?.title
|
||||
return (
|
||||
<Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
|
||||
<TranslateIcon fontSize='small' color='primary' />
|
||||
{label}
|
||||
</Box>
|
||||
)
|
||||
}}
|
||||
onChange={event => setTab(event.target.value)}
|
||||
>
|
||||
<MenuItem value={0}>Transcription</MenuItem>
|
||||
{CONTINENTS.flatMap(continent => {
|
||||
const items = langArray
|
||||
.map((item, index) => ({...item, index}))
|
||||
.filter(item => item.continent === continent)
|
||||
|
||||
if (items.length === 0) {
|
||||
return null
|
||||
}
|
||||
if (items.length === 0) {
|
||||
return []
|
||||
}
|
||||
|
||||
return (
|
||||
<Box key={continent} sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5}}>
|
||||
<Typography variant='caption' color='text.secondary' sx={{textTransform: 'uppercase', letterSpacing: 1}}>
|
||||
{continent}
|
||||
</Typography>
|
||||
<Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1}}>
|
||||
{items.map(({title, index}) => (
|
||||
<Chip
|
||||
key={title}
|
||||
clickable
|
||||
color='primary'
|
||||
label={title}
|
||||
sx={{fontWeight: tab === index + 1 ? 600 : 400}}
|
||||
variant={tab === index + 1 ? 'filled' : 'outlined'}
|
||||
onClick={() => setTab(index + 1)}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
})}
|
||||
return [
|
||||
<ListSubheader
|
||||
key={`entet-${continent}`}
|
||||
sx={{
|
||||
fontWeight: 700,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
color: 'primary.main',
|
||||
lineHeight: '2.5em'
|
||||
}}
|
||||
>
|
||||
{continent}
|
||||
</ListSubheader>,
|
||||
...items.map(({title, index, vedette}) => (
|
||||
<MenuItem key={title} value={index + 1} sx={{display: 'flex', gap: 0.75}}>
|
||||
{vedette && <StarIcon fontSize='inherit' color='primary' />}
|
||||
{title}
|
||||
</MenuItem>
|
||||
))
|
||||
]
|
||||
})}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
{tab === 0 && (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user