From d64aa863dc3c5a338aecfaeb1cf7a13ecd60cda6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Fri, 26 Jun 2026 12:23:44 +0400 Subject: [PATCH 1/3] 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 ( + + ) +} From 96dafb7b54a62299732b0ecb7cfab2bc51658f9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Fri, 26 Jun 2026 12:23:49 +0400 Subject: [PATCH 2/3] feat: populate and display rezoSosyal on artist page --- components/awtis/awtis-detay.js | 12 +++++++++++- lib/oki-api.js | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) 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/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 From 1c86d0b962763e906c8cb05c2b41ace4c3689bd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= Date: Fri, 26 Jun 2026 21:16:57 +0400 Subject: [PATCH 3/3] fix: use available icon exports in social-buttons --- components/awtis/social-buttons.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/awtis/social-buttons.js b/components/awtis/social-buttons.js index b23c1bc..76cce35 100644 --- a/components/awtis/social-buttons.js +++ b/components/awtis/social-buttons.js @@ -3,18 +3,18 @@ import Button from '@mui/material/Button' import OpenInNewIcon from '@mui/icons-material/OpenInNew' import { - Mastodon, Peertube, Pixelfed, Funkwhale, - Bluesky, Instagram, Youtube, Tiktok, + Mastodon, Peertube, + Instagram, Youtube, Tiktok, Spotify, Deezer, Applemusic, Bandcamp, Soundcloud, - Facebook, X, Linktree, + 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: Pixelfed}, - Funkwhale: {label: 'Funkwhale', bg: '#E01B60', color: '#fff', Icon: Funkwhale}, - Bluesky: {label: 'Bluesky', bg: '#0085FF', color: '#fff', Icon: Bluesky}, + 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}, @@ -24,8 +24,8 @@ const SOCIAL_CONFIG = { 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}, + 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}, }