Merge pull request 'feat: add social networks to artist page' (#3) from feat/improve-artist-page into master

Reviewed-on: #3

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 ? (

components/awtis/social-buttons.js

@@ -0,0 +1,55 @@
+'use client'
+
+import Button from '@mui/material/Button'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import {
+  Mastodon, Peertube,
+  Instagram, Youtube, Tiktok,
+  Spotify, Deezer, Applemusic, Bandcamp, Soundcloud,
+  Facebook, Twitter,
+} from '@icons-pack/react-simple-icons'
+
+const SOCIAL_CONFIG = {
+  Mastodon:   {label: 'Mastodon',    bg: '#6364FF', color: '#fff', Icon: Mastodon},
+  Peertube:   {label: 'PeerTube',    bg: '#F2690D', color: '#fff', Icon: Peertube},
+  Pixelfed:   {label: 'Pixelfed',    bg: '#11D49D', color: '#fff', Icon: null},
+  Funkwhale:  {label: 'Funkwhale',   bg: '#E01B60', color: '#fff', Icon: null},
+  Bluesky:    {label: 'Bluesky',     bg: '#0085FF', color: '#fff', Icon: null},
+  Instagram:  {label: 'Instagram',   bg: '#E4405F', color: '#fff', Icon: Instagram},
+  Youtube:    {label: 'YouTube',     bg: '#FF0000', color: '#fff', Icon: Youtube},
+  Tiktok:     {label: 'TikTok',      bg: '#000000', color: '#fff', Icon: Tiktok},
+  Spotify:    {label: 'Spotify',     bg: '#1DB954', color: '#fff', Icon: Spotify},
+  Deezer:     {label: 'Deezer',      bg: '#EF5466', color: '#fff', Icon: Deezer},
+  Applemusic: {label: 'Apple Music', bg: '#FC3C44', color: '#fff', Icon: Applemusic},
+  Bandcamp:   {label: 'Bandcamp',    bg: '#1DA0C3', color: '#fff', Icon: Bandcamp},
+  Soundcloud: {label: 'SoundCloud',  bg: '#FF5500', color: '#fff', Icon: Soundcloud},
+  Facebook:   {label: 'Facebook',    bg: '#1877F2', color: '#fff', Icon: Facebook},
+  Twitter:    {label: 'X / Twitter', bg: '#000000', color: '#fff', Icon: Twitter},
+  Linktree:   {label: 'Linktree',    bg: '#43E660', color: '#000', Icon: null},
+  SiteWeb:    {label: 'Site web',    bg: '#555555', color: '#fff', Icon: null},
+}
+
+export function SocialButton({rezo}) {
+  const config = SOCIAL_CONFIG[rezo.plateforme] ?? {label: rezo.plateforme, bg: '#555', color: '#fff', Icon: null}
+  const PlatformIcon = config.Icon
+  return (
+    <Button
+      href={rezo.url}
+      target='_blank'
+      rel='noopener noreferrer'
+      size='small'
+      startIcon={PlatformIcon ? <PlatformIcon size={16} color={config.color} /> : null}
+      endIcon={<OpenInNewIcon sx={{fontSize: 11}} />}
+      sx={{
+        bgcolor: config.bg,
+        color: config.color,
+        fontWeight: 700,
+        fontSize: '0.72rem',
+        textTransform: 'none',
+        '&:hover': {bgcolor: config.bg, opacity: 0.85},
+      }}
+    >
+      {config.label}
+    </Button>
+  )
+}

lib/oki-api.js

@@ -92,7 +92,7 @@ export async function jwennTeksEpiSlug(slug) {
 
 export async function jwennAwtisEpiSlug(slug) {
   const query = qs.stringify({
-    populate: ['paroles', 'photo', 'paroles.couverture', 'titrePhare', 'titrePhare.streamAudio', 'titrePhare.streamVideo', 'titrePhare.couverture'],
+    populate: ['paroles', 'photo', 'paroles.couverture', 'titrePhare', 'titrePhare.streamAudio', 'titrePhare.streamVideo', 'titrePhare.couverture', 'rezoSosyal'],
     filters: {
       slug: {
         $eq: slug