components/teks/teks.js

@@ -6,6 +6,7 @@ import Box from '@mui/material/Box'
 import Select from '@mui/material/Select'
 import MenuItem from '@mui/material/MenuItem'
 import ListSubheader from '@mui/material/ListSubheader'
+import Divider from '@mui/material/Divider'
 import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
@@ -17,6 +18,7 @@ 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 ArticleIcon from '@mui/icons-material/Article'
 
 import Image from 'next/image'
 
@@ -280,16 +282,21 @@ export default function Teks({parole}) {
               MenuProps={{PaperProps: {sx: {maxHeight: 420}}}}
               renderValue={value => {
                 const label = value === 0 ? 'Transcription' : langArray[value - 1]?.title
+                const Icon = value === 0 ? ArticleIcon : TranslateIcon
                 return (
-                  <Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
+                  <Box sx={{display: 'flex', alignItems: 'center', gap: 1, fontWeight: value === 0 ? 700 : 400}}>
-                    <TranslateIcon fontSize='small' color='primary' />
+                    <Icon fontSize='small' color='primary' />
                     {label}
                   </Box>
                 )
               }}
               onChange={event => setTab(event.target.value)}
             >
-              <MenuItem value={0}>Transcription</MenuItem>
+              <MenuItem value={0} sx={{display: 'flex', gap: 0.75, fontWeight: 700}}>
+                <ArticleIcon fontSize='inherit' color='primary' />
+                Transcription
+              </MenuItem>
+              <Divider />
               {CONTINENTS.flatMap(continent => {
                 const items = langArray
                   .map((item, index) => ({...item, index}))