feat: add more informations for isOKIAwtis

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'