ORGANISATION-KA-INTERNATIONALE/pawol.nu
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign artist page layout and social icons
Déploiement FRONT BETA / check (push) Successful in 2m13s
Details
Déploiement FRONT PROD / check (push) Successful in 2m15s
Details
Déploiement FRONT BETA / deploy (push) Successful in 22s
Details
Déploiement FRONT PROD / deploy (push) Successful in 21s
Details

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2026-06-26 22:03:19 +04:00
parent 719522f665
commit 9752e4bcdd
2 changed files with 129 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/awtis/awtis-detay.js
+58 -46
View File
@@ -12,6 +12,7 @@ import Button from '@mui/material/Button'
import CardActionArea from '@mui/material/CardActionArea' import CardActionArea from '@mui/material/CardActionArea'
import Chip from '@mui/material/Chip' import Chip from '@mui/material/Chip'
import Container from '@mui/material/Container' import Container from '@mui/material/Container'
import Divider from '@mui/material/Divider'
import Grid from '@mui/material/Grid' import Grid from '@mui/material/Grid'
import Paper from '@mui/material/Paper' import Paper from '@mui/material/Paper'
import Card from '@mui/material/Card' import Card from '@mui/material/Card'
@@ -20,6 +21,7 @@ import Typography from '@mui/material/Typography'
import {green} from '@mui/material/colors' import {green} from '@mui/material/colors'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace' import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
import MusicNoteIcon from '@mui/icons-material/MusicNote'
import VerifiedIcon from '@mui/icons-material/Verified' import VerifiedIcon from '@mui/icons-material/Verified'
import {formatKuveti} from '../../lib/kuveti' import {formatKuveti} from '../../lib/kuveti'
@@ -51,28 +53,32 @@ export default function AwtisDetay({anAwtis}) {
: null : null
return ( 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>
<Box sx={{display: 'flex', justifyContent: 'center', mb: 2}}> {/* Héro */}
<Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', pt: 2, pb: 3}}>
<Box sx={{ <Box sx={{
width: 200, height: 200, width: 150, height: 150,
borderRadius: '50%', borderRadius: '50%',
border: `2px solid ${green[500]}`, border: `3px solid ${green[500]}`,
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
flexShrink: 0, flexShrink: 0,
mb: 2,
}}> }}>
{photoUrl ? ( {photoUrl ? (
<Image <Image
src={photoUrl} src={photoUrl}
alt={`Photo ${alias}`} alt={`Photo ${alias}`}
width={200} width={150}
height={200} height={150}
placeholder='blur' placeholder='blur'
blurDataURL={BLUR_DATA_URL} blurDataURL={BLUR_DATA_URL}
style={{objectFit: 'cover', width: '100%', height: '100%'}} style={{objectFit: 'cover', width: '100%', height: '100%'}}
@@ -81,32 +87,44 @@ export default function AwtisDetay({anAwtis}) {
<Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} /> <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
)} )}
</Box> </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> </Box>
)}
{isExclusiveArtist && ( {isExclusiveArtist && (
<Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.75, mb: 2}}> <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5}}>
<Chip <Chip
icon={<VerifiedIcon sx={{fontSize: 16}} />} icon={<VerifiedIcon sx={{fontSize: 16}} />}
label={`Artiste ${EXCLUSIVE_LABEL}`} label={`Artiste ${EXCLUSIVE_LABEL}`}
size='small' size='small'
sx={{bgcolor: '#FFD700', color: '#000', fontWeight: 700, '& .MuiChip-icon': {color: '#000'}}} sx={{bgcolor: '#FFD700', color: '#000', fontWeight: 700, '& .MuiChip-icon': {color: '#000'}}}
/> />
<Typography variant='caption' sx={{color: 'text.secondary', textAlign: 'center'}}> <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. Certains morceaux sont publiés en exclusivité sur PAWÒL-NU, avant toute sortie sur les plateformes de streaming.
</Typography> </Typography>
</Box> </Box>
)} )}
</Box>
<Grid sx={{alignItems: 'center'}} container direction='column' spacing={3}> <Grid container direction='column' spacing={2}>
{biyo && ( {biyo && (
<Grid size={{xs: 12, md: 6}}> <Grid size={12}>
<Card sx={{minWidth: 300}}> <Card>
<CardActionArea onClick={() => meteEsByografiOuve(true)}> <CardActionArea onClick={() => meteEsByografiOuve(true)}>
<CardContent> <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>
<Typography textalign='justify' variant='subtitle1' component='h3'> <Typography variant='body1'>
{biyo} {biyo}
</Typography> </Typography>
</CardContent> </CardContent>
@@ -114,13 +132,21 @@ export default function AwtisDetay({anAwtis}) {
</Card> </Card>
</Grid> </Grid>
)} )}
{hasStreaming && ( {hasStreaming && (
<Grid size={{xs: 12, md: 6}}> <Grid size={12}>
<Card sx={{overflow: 'hidden'}}> <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> <Grid container>
{coverUrl && ( {coverUrl && (
<Grid size={{xs: 12, sm: 4}}> <Grid size={{xs: 12, sm: 4}}>
<Box sx={{position: 'relative', minHeight: 140, height: '100%'}}> <Box sx={{position: 'relative', minHeight: 130, height: '100%'}}>
<Image <Image
src={coverUrl} src={coverUrl}
alt={titrePhare.titre} alt={titrePhare.titre}
@@ -138,7 +164,7 @@ export default function AwtisDetay({anAwtis}) {
<Typography variant='subtitle1' sx={{fontWeight: 700}} gutterBottom> <Typography variant='subtitle1' sx={{fontWeight: 700}} gutterBottom>
{titrePhare.titre} {titrePhare.titre}
</Typography> </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 Écouter sur
</Typography> </Typography>
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1}}> <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1}}>
@@ -152,25 +178,12 @@ export default function AwtisDetay({anAwtis}) {
</Card> </Card>
</Grid> </Grid>
)} )}
{rezoSosyal?.length > 0 && (
<Grid size={{xs: 12, md: 6}}> <Grid size={12}>
<Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1, justifyContent: 'center'}}>
{rezoSosyal.map((rezo, i) => (
<SocialButton key={i} rezo={rezo} />
))}
</Box>
</Grid>
)}
<Grid size={{xs: 12, md: 6}}>
<Box marginbottom={3}>
{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'
id='panel-teks-header'
>
<Typography sx={{marginRight: 2, textAlign: 'center'}} variant='body1' component='h2'><strong>Liste des paroles</strong></Typography>
<Chip color='primary' label={paroles.length} size='small' variant='contained' /> <Chip color='primary' label={paroles.length} size='small' variant='contained' />
</AccordionSummary> </AccordionSummary>
<AccordionDetails sx={{paddingInline: 0}}> <AccordionDetails sx={{paddingInline: 0}}>
@@ -185,23 +198,22 @@ export default function AwtisDetay({anAwtis}) {
})} })}
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
) : ( ) : paroles.length === 0 ? (
paroles.length === 0 ? ( <Typography textAlign='center' variant='body1' color='text.secondary'>
<Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Aucune parole pour le moment</strong></Typography> Aucune parole pour le moment
</Typography>
) : ( ) : (
<Box> <Box>
<Typography gutterBottom textalign='center' variant='body1' component='h2'><strong>Parole</strong></Typography> <Typography gutterBottom variant='body1'><strong>Parole</strong></Typography>
<Paper sx={{height: '100%', paddingBlock: 2}}> <Paper sx={{paddingBlock: 2}}>
<MizikLyen anPawol={paroles[0]} kuveti={paroles[0].couverture?.formats?.thumbnail || formatKuveti(paroles[0].couverture)} /> <MizikLyen anPawol={paroles[0]} kuveti={paroles[0].couverture?.formats?.thumbnail || formatKuveti(paroles[0].couverture)} />
</Paper> </Paper>
</Box> </Box>
)
)} )}
</Box>
</Grid> </Grid>
</Grid> </Grid>
<Box sx={{textAlign: 'center', marginBlock: 3}}> <Box sx={{textAlign: 'center', my: 4}}>
<Link passHref href='/awtis'> <Link passHref href='/awtis'>
<Button variant='outlined' startIcon={<KeyboardBackspaceIcon />}> <Button variant='outlined' startIcon={<KeyboardBackspaceIcon />}>
Retour aux artistes Retour aux artistes
components/awtis/social-buttons.js
+30 -12
View File
@@ -1,7 +1,8 @@
'use client' 'use client'
import Button from '@mui/material/Button' import Chip from '@mui/material/Chip'
import OpenInNewIcon from '@mui/icons-material/OpenInNew' import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import { import {
Mastodon, Peertube, Mastodon, Peertube,
Instagram, Youtube, Tiktok, Instagram, Youtube, Tiktok,
@@ -32,24 +33,41 @@ const SOCIAL_CONFIG = {
export function SocialButton({rezo}) { export function SocialButton({rezo}) {
const config = SOCIAL_CONFIG[rezo.plateforme] ?? {label: rezo.plateforme, bg: '#555', color: '#fff', Icon: null} const config = SOCIAL_CONFIG[rezo.plateforme] ?? {label: rezo.plateforme, bg: '#555', color: '#fff', Icon: null}
const PlatformIcon = config.Icon const PlatformIcon = config.Icon
if (PlatformIcon) {
return ( return (
<Button <Tooltip title={config.label}>
<IconButton
component='a'
href={rezo.url} href={rezo.url}
target='_blank' target='_blank'
rel='noopener noreferrer' rel='noopener noreferrer'
size='small' size='small'
startIcon={PlatformIcon ? <PlatformIcon size={16} color={config.color} /> : null}
endIcon={<OpenInNewIcon sx={{fontSize: 11}} />}
sx={{ sx={{
bgcolor: config.bg, bgcolor: config.bg,
color: config.color, width: 34,
fontWeight: 700, height: 34,
fontSize: '0.72rem', '&:hover': {bgcolor: config.bg, opacity: 0.8},
textTransform: 'none',
'&:hover': {bgcolor: config.bg, opacity: 0.85},
}} }}
> >
{config.label} <PlatformIcon size={17} color={config.color} />
</Button> </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>
) )
} }