From d64aa863dc3c5a338aecfaeb1cf7a13ecd60cda6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Fri, 26 Jun 2026 12:23:44 +0400
Subject: [PATCH] feat: add SocialButton component for artist social networks

---
 components/awtis/social-buttons.js | 55 ++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 components/awtis/social-buttons.js

diff --git a/components/awtis/social-buttons.js b/components/awtis/social-buttons.js
new file mode 100644
index 0000000..b23c1bc
--- /dev/null
+++ b/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, Pixelfed, Funkwhale,
+  Bluesky, Instagram, Youtube, Tiktok,
+  Spotify, Deezer, Applemusic, Bandcamp, Soundcloud,
+  Facebook, X, Linktree,
+} 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: Pixelfed},
+  Funkwhale:  {label: 'Funkwhale',   bg: '#E01B60', color: '#fff', Icon: Funkwhale},
+  Bluesky:    {label: 'Bluesky',     bg: '#0085FF', color: '#fff', Icon: Bluesky},
+  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: X},
+  Linktree:   {label: 'Linktree',    bg: '#43E660', color: '#000', Icon: Linktree},
+  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>
+  )
+}