style: flèches de scroll des tabs plus visibles

2026-07-03 16:27:19 +04:00
parent cad6e39f53
commit daa3510d73
1 changed files with 22 additions and 1 deletions
@@ -13,6 +13,8 @@ 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'

@@ -225,7 +227,26 @@ export default function Teks({parole}) {
          scrollButtons
          allowScrollButtonsMobile
          centered={langArray.length === 0}
-          sx={{borderBottom: 1, borderColor: 'divider', mb: 2}}
+          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
+              }
+            }
+          }}
        >
          <Tab label='Transcription' />
          {langArray.map(({title}) => (