56 lines
2.4 KiB
JavaScript
56 lines
2.4 KiB
JavaScript
'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>
|
|
)
|
|
}
|