feat: show translations as tabs instead of grid

components/teks/teks.js

@@ -1,9 +1,10 @@
 'use client'
 
-import {useEffect} from 'react'
+import {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
@@ -78,54 +79,30 @@ const Root = styled('div')((
   },
 }))
 
-const LANG_NAMES = {fr: 'Français', en: 'English', es: 'Español', de: 'Deutsch', it: 'Italiano'}
+const LANG_NAMES = {
+  fr: 'Français', en: 'English', es: 'Español', de: 'Deutsch', it: 'Italiano',
+  pt: 'Português', ja: '日本語', ko: '한국어',
+}
+
+const TRAD_FIELDS = [
+  {field: 'anglais', title: 'English'},
+  {field: 'francais', title: 'Français'},
+  {field: 'espagnol', title: 'Español'},
+  {field: 'allemand', title: 'Deutsch'},
+  {field: 'italien', title: 'Italiano'},
+  {field: 'portugais', title: 'Português'},
+  {field: 'japonais', title: '日本語'},
+  {field: 'coreen', title: '한국어'},
+]
 
 const langToArray = parole => {
-  const langArray = []
+  if (!parole || !parole.traductions) {
-
+    return []
-  if (parole && parole.traductions) {
-    const {francais, anglais, espagnol, allemand, italien} = parole.traductions
-
-    if (anglais) {
-      langArray.push({title: 'English', lang: anglais})
   }
 
-    if (francais) {
+  return TRAD_FIELDS
-      langArray.push({title: 'Français', lang: francais})
+    .filter(({field}) => parole.traductions[field])
-    }
+    .map(({field, title}) => ({title, lang: parole.traductions[field]}))
-
-    if (espagnol) {
-      langArray.push({title: 'Español', lang: espagnol})
-    }
-
-    if (allemand) {
-      langArray.push({title: 'Deutsch', lang: allemand})
-    }
-
-    if (italien) {
-      langArray.push({title: 'Italiano', lang: italien})
-    }
-  }
-
-  return langArray
-}
-
-const alignTeks = (langArray, isMobile) => {
-  if (langArray.length > 0 && !isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length > 0 && isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length === 0 && isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length === 0 && !isMobile) {
-    return 'center'
-  }
 }
 
 const ExplicitTooltip = Tooltip
@@ -135,6 +112,7 @@ export default function Teks({parole}) {
   const langArray = langToArray(parole)
   const enhancedAliases = getAlias(parole.artistes, parole.prioriteArtistes, true)
   const coverFmt = formatKuveti(parole.couverture)
+  const [tab, setTab] = useState(0)
 
   useEffect(() => {
     const isBrowser = () => typeof window !== 'undefined'
@@ -231,35 +209,40 @@ export default function Teks({parole}) {
           </Box>
         )}
       </Box>
-      <Grid container justifycontent='center' spacing={1}>
+      <Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
-        <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>
+        <Tabs
-          <Box className={classes.gridText}>
+          value={tab}
-            <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
+          onChange={(event, value) => setTab(value)}
-              Transcription
+          variant='scrollable'
+          scrollButtons='auto'
+          centered={langArray.length === 0}
+          sx={{borderBottom: 1, borderColor: 'divider', mb: 2}}
+        >
+          <Tab label='Transcription' />
+          {langArray.map(({title}) => (
+            <Tab key={title} label={title} />
+          ))}
+        </Tabs>
+        {tab === 0 && (
+          <>
             {parole.langueSource && parole.langueSource !== 'ka' && (
-                <Typography component='span' variant='body2' color='text.secondary' sx={{ml: 1}}>
+              <Typography align='center' variant='body2' color='text.secondary' sx={{mb: 1}}>
                 ({LANG_NAMES[parole.langueSource]})
               </Typography>
             )}
-            </Typography>
+            <Typography paragraph='true' align={isMobile ? 'justify' : 'center'} component='span'>
-            <Typography paragraph='true' align={alignTeks(langArray, isMobile)} component='span'>
               {formatJsonString(parole.transcription)}
             </Typography>
-          </Box>
+          </>
-        </Grid>
+        )}
-        {langArray.map(({title, lang}) => (
+        {langArray.map(({title, lang}, index) => (
-          <Grid key={title} size={{xs: 12, md: 6}}>
+          tab === index + 1 && (
-            <Box className={classes.gridText}>
+            <Typography key={title} paragraph='true' align='justify' component='span'>
-              <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
-                {title}
-              </Typography>
-              <Typography paragraph='true' align='justify' component='span'>
               {formatJsonString(lang)}
             </Typography>
-            </Box>
+          )
-          </Grid>
         ))}
-      </Grid>
+      </Box>
     </Root>
   )
 }