feat: display stream links on teks

2026-06-22 12:56:29 +04:00
parent ac24abb051
commit 5a6273e9e3
3 changed files with 55 additions and 13 deletions
@@ -0,0 +1,41 @@
+'use client'
+
+import Button from '@mui/material/Button'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import {Spotify, Applemusic, Deezer, Tidal, Youtubemusic, Amazon, Soundcloud} from '@icons-pack/react-simple-icons'
+
+export const PLATFORM_CONFIG = {
+  Spotify:      {label: 'Spotify',        bg: '#1DB954', color: '#fff', Icon: Spotify},
+  Applemusic:   {label: 'Apple Music',    bg: '#FC3C44', color: '#fff', Icon: Applemusic},
+  Deezer:       {label: 'Deezer',         bg: '#EF5466', color: '#fff', Icon: Deezer},
+  Tidal:        {label: 'Tidal',          bg: '#000000', color: '#fff', Icon: Tidal},
+  Qobuz:        {label: 'Qobuz',          bg: '#00245B', color: '#fff', Icon: null},
+  Youtubemusic: {label: 'YouTube Music',  bg: '#FF0000', color: '#fff', Icon: Youtubemusic},
+  Amazon:       {label: 'Amazon Music',   bg: '#00A8E1', color: '#fff', Icon: Amazon},
+  Soundcloud:   {label: 'SoundCloud',     bg: '#FF5500', color: '#fff', Icon: Soundcloud},
+}
+
+export function StreamButton({lyen}) {
+  const config = PLATFORM_CONFIG[lyen.plateforme] ?? {label: lyen.plateforme, bg: '#555', color: '#fff', Icon: null}
+  const PlatformIcon = config.Icon
+  return (
+    <Button
+      href={lyen.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>
+  )
+}