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}}>

components/awtis/awtis-kat.js

@@ -10,8 +10,10 @@ import Card from '@mui/material/Card'
 import CardMedia from '@mui/material/CardMedia'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
 
 import {styled} from '@mui/material/styles'
+import VerifiedIcon from '@mui/icons-material/Verified'
 
 import AwtisBiyografi from './awtis-biyografi'
 
@@ -55,13 +57,26 @@ export default function AwtisKat({artiste}) {
   const router = useRouter()
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
 
-  const {alias, biographie, paroles, photo, slug} = artiste
+  const {alias, biographie, paroles, photo, slug, isOKIAwtis} = artiste
 
   return (
     <Grid size={{xs: 12, sm: 6, md: 4}}>
       <Kat>
-        <Card sx={{maxWidth: 340}}>
-          <CardActionArea onClick={() => router.push(`${SITE_URL}/awtis/${slug}`)}>
+        <Card sx={{maxWidth: 340, position: 'relative', ...(isOKIAwtis && {outline: '2px solid #FFD700'})}}>
+          {isOKIAwtis && (
+            <Chip
+              icon={<VerifiedIcon sx={{fontSize: 14}} />}
+              label='OKI Exclusif'
+              size='small'
+              sx={{
+                position: 'absolute', top: 8, left: 8, zIndex: 1,
+                bgcolor: '#FFD700', color: '#000',
+                fontWeight: 700, fontSize: '0.7rem',
+                '& .MuiChip-icon': {color: '#000'},
+              }}
+            />
+          )}
+          <CardActionArea onClick={() => router.push(`/awtis/${slug}`)}>
             <CardMedia
               className={classes.media}
               component='img'