feat: remplacer les onglets de langue par des puces adaptatives

components/teks/teks.js

@@ -3,8 +3,7 @@
 import {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
-import Tabs from '@mui/material/Tabs'
-import Tab from '@mui/material/Tab'
+import Chip from '@mui/material/Chip'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
@@ -13,8 +12,6 @@ import slugify from 'slugify'
 
 import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
-import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
 
 import Image from 'next/image'
 
@@ -121,6 +118,7 @@ export default function Teks({parole}) {
   const coverFmt = formatKuveti(parole.couverture)
   const [tab, setTab] = useState(0)
   const [, setCurrentTrack] = useCurrentTrack()
+  const options = ['Transcription', ...langArray.map(({title}) => title)]
 
   useEffect(() => {
     const isBrowser = () => typeof window !== 'undefined'
@@ -230,39 +228,19 @@ export default function Teks({parole}) {
         )}
       </Box>
       <Box sx={{maxWidth: 700, margin: '0 auto'}} className={classes.gridText}>
-        <Tabs
-          scrollButtons
-          allowScrollButtonsMobile
-          value={tab}
-          variant='scrollable'
-          centered={langArray.length === 0}
-          slots={{
-            startScrollButtonIcon: ArrowBackIosNewIcon,
-            endScrollButtonIcon: ArrowForwardIosIcon
-          }}
-          sx={{
-            borderBottom: 1,
-            borderColor: 'divider',
-            mb: 2,
-            '& .MuiTabs-scrollButtons': {
-              width: 36,
-              height: 36,
-              borderRadius: '50%',
-              color: 'primary.main',
-              backgroundColor: 'action.hover',
-              mx: 0.5,
-              '&.Mui-disabled': {
-                opacity: 0
-              }
-            }
-          }}
-          onChange={(event, value) => setTab(value)}
-        >
-          <Tab label='Transcription' />
-          {langArray.map(({title}) => (
-            <Tab key={title} label={title} />
+        <Box sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 1, borderBottom: 1, borderColor: 'divider', mb: 2, pb: 2}}>
+          {options.map((label, index) => (
+            <Chip
+              key={label}
+              clickable
+              color='primary'
+              label={label}
+              sx={{fontWeight: tab === index ? 600 : 400}}
+              variant={tab === index ? 'filled' : 'outlined'}
+              onClick={() => setTab(index)}
+            />
           ))}
-        </Tabs>
+        </Box>
         {tab === 0 && (
           <>
             {parole.langueSource && parole.langueSource !== 'ka' && (