feat: populate and display rezoSosyal on artist page

components/awtis/awtis-detay.js

@@ -24,6 +24,7 @@ import VerifiedIcon from '@mui/icons-material/Verified'
 
 import {formatKuveti} from '../../lib/kuveti'
 import {StreamButton} from '../streaming-buttons'
+import {SocialButton} from './social-buttons'
 import AwtisBiyografi from './awtis-biyografi'
 import MizikLyen from './mizik-lyen'
 
@@ -35,7 +36,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, isExclusiveArtist, titrePhare} = anAwtis
+  const {alias, biographie, paroles, photo, isExclusiveArtist, titrePhare, rezoSosyal} = anAwtis
   const sortedTeks = sortTeks(paroles)
   const gwanBiyo = biographie && biographie.length > 100
   const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
@@ -151,6 +152,15 @@ export default function AwtisDetay({anAwtis}) {
             </Card>
           </Grid>
         )}
+        {rezoSosyal?.length > 0 && (
+          <Grid size={{xs: 12, md: 6}}>
+            <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1, justifyContent: 'center'}}>
+              {rezoSosyal.map((rezo, i) => (
+                <SocialButton key={i} rezo={rezo} />
+              ))}
+            </Box>
+          </Grid>
+        )}
         <Grid size={{xs: 12, md: 6}}>
           <Box marginbottom={3}>
             {paroles.length > 1 ? (