Fix align teks by adding alignTeks method

components/teks/teks-drawer.js

@@ -125,6 +125,24 @@ const langToArray = anTeks => {
   return langArray
 }
 
+const alignTeks = (langArray, isMobile) => {
+  if (langArray.length > 0 && !isMobile) {
+    return 'justify'
+  }
+
+  if (langArray.length > 0 && isMobile) {
+    return 'justify'
+  }
+
+  if (langArray.length === 0 && isMobile) {
+    return 'justify'
+  }
+
+  if (langArray.length === 0 && !isMobile) {
+    return 'center'
+  }
+}
+
 export default function TeksDrawer({teks, anTeks}) {
   const isMobile = useMediaQuery('(max-width:800px)')
   const langArray = langToArray(anTeks)
@@ -232,7 +250,7 @@ export default function TeksDrawer({teks, anTeks}) {
                   <Typography align='center' className={classes.text} variant='h4'>
                     Transcription
                   </Typography>
-                  <Typography paragraph align={langArray.length === 0 && isMobile ? 'justify' : 'center'} component='span'>
+                  <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
                     {formatJsonString(anTeks.transkripsyon)}
                   </Typography>
                 </div>