feat: add more informations for isOKIAwtis

components/awtis/awtis-detay.js

@@ -21,6 +21,8 @@ import {green} from '@mui/material/colors'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
 
+import VerifiedIcon from '@mui/icons-material/Verified'
+
 import {formatKuveti} from '../../lib/kuveti'
 import AwtisBiyografi from './awtis-biyografi'
 import MizikLyen from './mizik-lyen'
@@ -32,7 +34,7 @@ const sortTeks = paroles => paroles.sort((a, b) => a.titre.localeCompare(b.titre
 
 export default function AwtisDetay({anAwtis}) {
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
-  const {alias, biographie, paroles, photo} = anAwtis
+  const {alias, biographie, paroles, photo, isOKIAwtis} = anAwtis
   const sortedTeks = sortTeks(paroles)
   const gwanBiyo = biographie && biographie.length > 100
 
@@ -56,6 +58,19 @@ export default function AwtisDetay({anAwtis}) {
           sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
         />
       </Box>
+      {isOKIAwtis && (
+        <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.75, mb: 2}}>
+          <Chip
+            icon={<VerifiedIcon sx={{fontSize: 16}} />}
+            label='Artiste OKI Exclusif'
+            size='small'
+            sx={{bgcolor: '#FFD700', color: '#000', fontWeight: 700, '& .MuiChip-icon': {color: '#000'}}}
+          />
+          <Typography variant='caption' sx={{color: 'text.secondary', textAlign: 'center'}}>
+            Paroles publiées en exclusivité sur PAWÒL-NU, avant toute sortie sur les plateformes de streaming.
+          </Typography>
+        </Box>
+      )}
       <Grid sx={{alignItems:'center'}} container direction='column' spacing={3}>
         {biyo && (
           <Grid size={{xs: 12, md: 6}}>