Replace join by Intl object

components/teks/lekte.js

@@ -58,6 +58,7 @@ export default function Lekte({audio, url, teks}) {
   const [position, setPosition] = useState(0)
   const [volume, setVolume] = useState(100)
   const [isPlaying, setIsPlaying] = useState(false)
+  const awtis = teks.awtis.map(({alias}) => alias)
 
   function formatDuration(value) {
     const minute = Math.floor(value / 60)
@@ -146,7 +147,7 @@ export default function Lekte({audio, url, teks}) {
           </CoverImage>
           <Box sx={{ml: 1.5, minWidth: 0}}>
             <Typography fontWeight={500}>
-              {teks.awtis.map(a => a.alias).join(', ')}
+              {new Intl.ListFormat('fr').format(awtis)}
             </Typography>
             <Typography>
               <Link underline='hover' sx={{cursor: 'pointer'}} target='_blank' rel='noreferrer' href={url}>