Add Link to awtis in Teks

components/teks/teks.js

@@ -7,6 +7,8 @@ import Grid from '@mui/material/Unstable_Grid2'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
+import Link from 'next/link'
+import slugify from 'slugify'
 
 import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
@@ -27,10 +29,15 @@ const classes = {
   grid: `${PREFIX}-grid`,
   koute: `${PREFIX}-koute`,
   vwe: `${PREFIX}-vwe`,
-  pataje: `${PREFIX}-pataje`
+  pataje: `${PREFIX}-pataje`,
+  separation: `${PREFIX}-separation`
 }
 
-const Root = styled('div')(() => ({
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
   [`&.${classes.container}`]: {
     marginTop: '3em',
   },
@@ -47,6 +54,13 @@ const Root = styled('div')(() => ({
     zIndex: 9999
   },
 
+  [`& .${classes.separation}`]: {
+    color: 'black',
+    [theme.getColorSchemeSelector('dark')]: {
+      color: 'white'
+    }
+  },
+
   '@media (max-width: 600px)': {
     marginLeft: '0',
   },
@@ -109,7 +123,7 @@ const ExplicitTooltip = Tooltip
 export default function Teks({parole}) {
   const isMobile = useMediaQuery('(max-width:600px)')
   const langArray = langToArray(parole)
-  const aliases = getAlias(parole.artistes, parole.prioriteArtistes)
+  const enhancedAliases = getAlias(parole.artistes, parole.prioriteArtistes, true)
 
   useEffect(() => {
     const isBrowser = () => typeof window !== 'undefined'
@@ -124,8 +138,16 @@ export default function Teks({parole}) {
     <Root className={classes.container}>
       <Box sx={{textAlign: 'center', marginTop: 1}}>
         <Typography variant='h4' component='div' display='block' marginBottom={2}>
-          <Typography gutterBottom variant='h6' component='div'>
-            {aliases}
+          <Typography gutterBottom color='primary' variant='h6' component='div'>
+            {enhancedAliases.map(({type, value}) => {
+              if (type === 'element') {
+                return (
+                  <Link style={{textDecoration: 'none', color: 'inherit'}} href={`/awtis/${slugify(value, {lower: true, remove: /[*#+~.()'"!:@]/g})}`}>{value}</Link>
+                )
+              }
+
+              return <span key={value} className={classes.separation}>{value}</span>
+            })}
           </Typography>
           <Typography variant='h5' component='div'>
             {parole.titre} <small>({parole?.annee})</small>