diff --git a/components/awtis/awtis-detay.js b/components/awtis/awtis-detay.js
index e50967a..edb0e05 100644
--- a/components/awtis/awtis-detay.js
+++ b/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}) {
)}
+ {rezoSosyal?.length > 0 && (
+
+
+ {rezoSosyal.map((rezo, i) => (
+
+ ))}
+
+
+ )}
{paroles.length > 1 ? (
diff --git a/components/awtis/social-buttons.js b/components/awtis/social-buttons.js
new file mode 100644
index 0000000..76cce35
--- /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,
+ 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 (
+ : null}
+ endIcon={}
+ sx={{
+ bgcolor: config.bg,
+ color: config.color,
+ fontWeight: 700,
+ fontSize: '0.72rem',
+ textTransform: 'none',
+ '&:hover': {bgcolor: config.bg, opacity: 0.85},
+ }}
+ >
+ {config.label}
+
+ )
+}
diff --git a/lib/oki-api.js b/lib/oki-api.js
index fffd9a3..c24fd01 100644
--- a/lib/oki-api.js
+++ b/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