feat: replace flags by text

components/teks/teks.js

@@ -77,6 +77,8 @@ const Root = styled('div')((
   },
 }))
 
+const LANG_NAMES = {fr: 'Français', en: 'English', es: 'Español', de: 'Deutsch', it: 'Italiano'}
+
 const langToArray = parole => {
   const langArray = []
 
@@ -84,23 +86,23 @@ const langToArray = parole => {
     const {francais, anglais, espagnol, allemand, italien} = parole.traductions
 
     if (anglais) {
-      langArray.push({title: 'Translation', flag: 'en', lang: anglais})
+      langArray.push({title: 'English', lang: anglais})
     }
 
     if (francais) {
-      langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
+      langArray.push({title: 'Français', lang: francais})
     }
 
     if (espagnol) {
-      langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
+      langArray.push({title: 'Español', lang: espagnol})
     }
 
     if (allemand) {
-      langArray.push({title: 'Übersetzung', flag: 'de', lang: allemand})
+      langArray.push({title: 'Deutsch', lang: allemand})
     }
 
     if (italien) {
-      langArray.push({title: 'Traduzione', flag: 'it', lang: italien})
+      langArray.push({title: 'Italiano', lang: italien})
     }
   }
 
@@ -198,7 +200,7 @@ export default function Teks({parole}) {
         )}
         {parole.creativeCommons && (
           <Box sx={{maxWidth: 220, margin: '0 auto', textAlign: 'center'}}>
-            <LicenseModal license={parole.creativeCommons.toLowerCase()} />
+            <LicenseModal license={parole.creativeCommons.toLowerCase()} sourceOriginale={parole.sourceOriginale ?? null} remixes={parole.remixes?.length ? parole.remixes : null} />
           </Box>
         )}
         {parole?.files && (
@@ -221,41 +223,22 @@ export default function Teks({parole}) {
           <Box className={classes.gridText}>
             <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
               Transcription
+              {parole.langueSource && parole.langueSource !== 'ka' && (
+                <Typography component='span' variant='body2' color='text.secondary' sx={{ml: 1}}>
+                  ({LANG_NAMES[parole.langueSource]})
+                </Typography>
+              )}
             </Typography>
             <Typography paragraph='true' align={alignTeks(langArray, isMobile)} component='span'>
               {formatJsonString(parole.transcription)}
             </Typography>
           </Box>
         </Grid>
-        {langArray.map(({title, flag, lang}) => (
+        {langArray.map(({title, lang}) => (
           <Grid key={title} size={{xs: 12, md: 6}}>
             <Box className={classes.gridText}>
               <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
-                {flag === 'fr' && (
+                {title}
-                  <span>
-                    🇫🇷
-                  </span>
-                )}
-                {flag === 'en' && (
-                  <span>
-                    🇺🇸
-                  </span>
-                )}
-                {flag === 'es' && (
-                  <span>
-                    🇪🇸
-                  </span>
-                )}
-                {flag === 'de' && (
-                  <span>
-                    🇩🇪
-                  </span>
-                )}
-                {flag === 'it' && (
-                  <span>
-                    🇮🇹
-                  </span>
-                )} {title}
               </Typography>
               <Typography paragraph='true' align='justify' component='span'>
                 {formatJsonString(lang)}