pawol.nu/components/awtis/social-buttons.js

'use client'

import Chip from '@mui/material/Chip'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
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

  if (PlatformIcon) {
    return (
      <Tooltip title={config.label}>
        <IconButton
          component='a'
          href={rezo.url}
          target='_blank'
          rel='noopener noreferrer'
          size='small'
          sx={{
            bgcolor: config.bg,
            width: 34,
            height: 34,
            '&:hover': {bgcolor: config.bg, opacity: 0.8},
          }}
        >
          <PlatformIcon size={17} color={config.color} />
        </IconButton>
      </Tooltip>
    )
  }

  return (
    <Tooltip title={rezo.url}>
      <Chip
        label={config.label}
        component='a'
        href={rezo.url}
        target='_blank'
        rel='noopener noreferrer'
        clickable
        size='small'
        sx={{bgcolor: config.bg, color: config.color, fontWeight: 600}}
      />
    </Tooltip>
  )
}