feat: redesign artist page layout and social icons

Reviewed-on: #3

components/awtis/awtis-detay.js

@@ -12,6 +12,7 @@ import Button from '@mui/material/Button'
 import CardActionArea from '@mui/material/CardActionArea'
 import Chip from '@mui/material/Chip'
 import Container from '@mui/material/Container'
+import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Grid'
 import Paper from '@mui/material/Paper'
 import Card from '@mui/material/Card'
@@ -20,10 +21,12 @@ import Typography from '@mui/material/Typography'
 import {green} from '@mui/material/colors'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
+import MusicNoteIcon from '@mui/icons-material/MusicNote'
 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 +38,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
@@ -50,28 +53,32 @@ export default function AwtisDetay({anAwtis}) {
     : null
 
   return (
-    <Container>
+    <Container maxWidth='sm'>
-      <Box sx={{mt: 8, mb: 2}}>
+      <Box sx={{mt: 2, mb: 1}}>
-        <Typography sx={{textAlign: 'center'}} variant='h6' component='h1'>
+        <Link passHref href='/awtis'>
-          {alias}
+          <Button size='small' variant='text' startIcon={<KeyboardBackspaceIcon />} sx={{color: 'text.secondary'}}>
-        </Typography>
+            Retour aux artistes
+          </Button>
+        </Link>
       </Box>
 
-      <Box sx={{display: 'flex', justifyContent: 'center', mb: 2}}>
+      {/* Héro */}
+      <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', pt: 2, pb: 3}}>
         <Box sx={{
-          width: 200, height: 200,
+          width: 150, height: 150,
           borderRadius: '50%',
-          border: `2px solid ${green[500]}`,
+          border: `3px solid ${green[500]}`,
           overflow: 'hidden',
           position: 'relative',
           flexShrink: 0,
+          mb: 2,
         }}>
           {photoUrl ? (
             <Image
               src={photoUrl}
               alt={`Photo ${alias}`}
-              width={200}
+              width={150}
-              height={200}
+              height={150}
               placeholder='blur'
               blurDataURL={BLUR_DATA_URL}
               style={{objectFit: 'cover', width: '100%', height: '100%'}}
@@ -80,32 +87,44 @@ export default function AwtisDetay({anAwtis}) {
             <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
           )}
         </Box>
+
+        <Typography variant='h5' component='h1' sx={{fontWeight: 700, mb: 1, textAlign: 'center'}}>
+          {alias}
+        </Typography>
+
+        {rezoSosyal?.length > 0 && (
+          <Box sx={{display: 'flex', gap: 0.75, flexWrap: 'wrap', justifyContent: 'center', mb: 1.5}}>
+            {rezoSosyal.map((rezo, i) => (
+              <SocialButton key={i} rezo={rezo} />
+            ))}
+          </Box>
+        )}
+
+        {isExclusiveArtist && (
+          <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5}}>
+            <Chip
+              icon={<VerifiedIcon sx={{fontSize: 16}} />}
+              label={`Artiste ${EXCLUSIVE_LABEL}`}
+              size='small'
+              sx={{bgcolor: '#FFD700', color: '#000', fontWeight: 700, '& .MuiChip-icon': {color: '#000'}}}
+            />
+            <Typography variant='caption' sx={{color: 'text.secondary', textAlign: 'center', maxWidth: 340}}>
+              Certains morceaux sont publiés en exclusivité sur PAWÒL-NU, avant toute sortie sur les plateformes de streaming.
+            </Typography>
+          </Box>
+        )}
       </Box>
 
-      {isExclusiveArtist && (
+      <Grid container direction='column' spacing={2}>
-        <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.75, mb: 2}}>
-          <Chip
-            icon={<VerifiedIcon sx={{fontSize: 16}} />}
-            label={`Artiste ${EXCLUSIVE_LABEL}`}
-            size='small'
-            sx={{bgcolor: '#FFD700', color: '#000', fontWeight: 700, '& .MuiChip-icon': {color: '#000'}}}
-          />
-          <Typography variant='caption' sx={{color: 'text.secondary', textAlign: 'center'}}>
-            Certains morceaux sont publiés en exclusivité sur PAWÒL-NU, avant toute sortie sur les plateformes de streaming.
-          </Typography>
-        </Box>
-      )}
-
-      <Grid sx={{alignItems: 'center'}} container direction='column' spacing={3}>
         {biyo && (
-          <Grid size={{xs: 12, md: 6}}>
+          <Grid size={12}>
-            <Card sx={{minWidth: 300}}>
+            <Card>
               <CardActionArea onClick={() => meteEsByografiOuve(true)}>
                 <CardContent>
-                  <Typography gutterBottom variant='body1' component='h2'>
+                  <Typography gutterBottom variant='body2' sx={{fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary', letterSpacing: 0.5}}>
-                    <strong>Biographie</strong>
+                    Biographie
                   </Typography>
-                  <Typography textalign='justify' variant='subtitle1' component='h3'>
+                  <Typography variant='body1'>
                     {biyo}
                   </Typography>
                 </CardContent>
@@ -113,13 +132,21 @@ export default function AwtisDetay({anAwtis}) {
             </Card>
           </Grid>
         )}
+
         {hasStreaming && (
-          <Grid size={{xs: 12, md: 6}}>
+          <Grid size={12}>
             <Card sx={{overflow: 'hidden'}}>
+              <Box sx={{px: 2, pt: 1.5, pb: 0.5, display: 'flex', alignItems: 'center', gap: 0.75}}>
+                <MusicNoteIcon sx={{fontSize: 14, color: 'text.secondary'}} />
+                <Typography variant='caption' sx={{fontWeight: 700, textTransform: 'uppercase', color: 'text.secondary', letterSpacing: 0.5}}>
+                  Titre phare
+                </Typography>
+              </Box>
+              <Divider />
               <Grid container>
                 {coverUrl && (
                   <Grid size={{xs: 12, sm: 4}}>
-                    <Box sx={{position: 'relative', minHeight: 140, height: '100%'}}>
+                    <Box sx={{position: 'relative', minHeight: 130, height: '100%'}}>
                       <Image
                         src={coverUrl}
                         alt={titrePhare.titre}
@@ -137,7 +164,7 @@ export default function AwtisDetay({anAwtis}) {
                     <Typography variant='subtitle1' sx={{fontWeight: 700}} gutterBottom>
                       {titrePhare.titre}
                     </Typography>
-                    <Typography variant='caption' sx={{color: 'text.secondary', display: 'block', mb: 1.5}}>
+                    <Typography variant='caption' sx={{color: 'text.secondary', display: 'block', mb: 1}}>
                       Écouter sur
                     </Typography>
                     <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1}}>
@@ -151,47 +178,42 @@ export default function AwtisDetay({anAwtis}) {
             </Card>
           </Grid>
         )}
-        <Grid size={{xs: 12, md: 6}}>
+
-          <Box marginbottom={3}>
+        <Grid size={12}>
-            {paroles.length > 1 ? (
+          {paroles.length > 1 ? (
-              <Accordion>
+            <Accordion>
-                <AccordionSummary
+              <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls='panel-teks-content' id='panel-teks-header'>
-                  expandIcon={<ExpandMoreIcon />}
+                <Typography sx={{marginRight: 2}} variant='body1'><strong>Liste des paroles</strong></Typography>
-                  aria-controls='panel-teks-content'
+                <Chip color='primary' label={paroles.length} size='small' variant='contained' />
-                  id='panel-teks-header'
+              </AccordionSummary>
-                >
+              <AccordionDetails sx={{paddingInline: 0}}>
-                  <Typography sx={{marginRight: 2, textAlign: 'center'}} variant='body1' component='h2'><strong>Liste des paroles</strong></Typography>
+                {sortedTeks.map(anPawol => {
-                  <Chip color='primary' label={paroles.length} size='small' variant='contained' />
+                  const {couverture} = anPawol
-                </AccordionSummary>
+                  const kuvetiFormat = couverture?.formats?.thumbnail || formatKuveti(couverture)
-                <AccordionDetails sx={{paddingInline: 0}}>
+                  return (
-                  {sortedTeks.map(anPawol => {
+                    <Box key={anPawol.id} sx={{paddingBlock: 0.5}}>
-                    const {couverture} = anPawol
+                      <MizikLyen anPawol={anPawol} kuveti={kuvetiFormat} />
-                    const kuvetiFormat = couverture?.formats?.thumbnail || formatKuveti(couverture)
+                    </Box>
-                    return (
+                  )
-                      <Box key={anPawol.id} sx={{paddingBlock: 0.5}}>
+                })}
-                        <MizikLyen anPawol={anPawol} kuveti={kuvetiFormat} />
+              </AccordionDetails>
-                      </Box>
+            </Accordion>
-                    )
+          ) : paroles.length === 0 ? (
-                  })}
+            <Typography textAlign='center' variant='body1' color='text.secondary'>
-                </AccordionDetails>
+              Aucune parole pour le moment
-              </Accordion>
+            </Typography>
-            ) : (
+          ) : (
-              paroles.length === 0 ? (
+            <Box>
-                <Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Aucune parole pour le moment</strong></Typography>
+              <Typography gutterBottom variant='body1'><strong>Parole</strong></Typography>
-              ) : (
+              <Paper sx={{paddingBlock: 2}}>
-                <Box>
+                <MizikLyen anPawol={paroles[0]} kuveti={paroles[0].couverture?.formats?.thumbnail || formatKuveti(paroles[0].couverture)} />
-                  <Typography gutterBottom textalign='center' variant='body1' component='h2'><strong>Parole</strong></Typography>
+              </Paper>
-                  <Paper sx={{height: '100%', paddingBlock: 2}}>
+            </Box>
-                    <MizikLyen anPawol={paroles[0]} kuveti={paroles[0].couverture?.formats?.thumbnail || formatKuveti(paroles[0].couverture)} />
+          )}
-                  </Paper>
-                </Box>
-              )
-            )}
-          </Box>
         </Grid>
       </Grid>
 
-      <Box sx={{textAlign: 'center', marginBlock: 3}}>
+      <Box sx={{textAlign: 'center', my: 4}}>
         <Link passHref href='/awtis'>
           <Button variant='outlined' startIcon={<KeyboardBackspaceIcon />}>
             Retour aux artistes

components/awtis/social-buttons.js

@@ -0,0 +1,73 @@
+'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>
+  )
+}

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