63 lines
2.0 KiB
React
63 lines
2.0 KiB
React
|
'use client'
|
||
|
|
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
import Box from '@mui/material/Box'
|
||
|
|
import Avatar from '@mui/material/Avatar'
|
||
|
|
import Typography from '@mui/material/Typography'
|
||
|
|
import Chip from '@mui/material/Chip'
|
||
|
|
import Link from 'next/link'
|
||
|
|
|
||
|
|
function formatAuteur(commentaire) {
|
||
|
|
if (commentaire.origine === 'activitypub') {
|
||
|
|
return commentaire.auteurNom || commentaire.auteurHandle || 'Yon moun'
|
||
|
|
}
|
||
|
|
|
||
|
|
return commentaire.user?.username || 'Anonim'
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Komante({commentaires}) {
|
||
|
|
if (!commentaires || commentaires.length === 0) {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{maxWidth: 700, margin: '2em auto 0'}}>
|
||
|
|
<Typography gutterBottom variant='h6'>
|
||
|
|
Komantè
|
||
|
|
</Typography>
|
||
|
|
{commentaires.map(commentaire => {
|
||
|
|
const auteur = formatAuteur(commentaire)
|
||
|
|
const estFedere = commentaire.origine === 'activitypub'
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box key={commentaire.id} sx={{display: 'flex', gap: 1.5, mb: 2}}>
|
||
|
|
<Avatar src={commentaire.auteurAvatarUrl} alt={auteur} />
|
||
|
|
<Box sx={{flex: 1}}>
|
||
|
|
<Typography variant='subtitle2' component='div'>
|
||
|
|
{estFedere && commentaire.auteurProfilUrl ? (
|
||
|
|
<Link href={commentaire.auteurProfilUrl} target='_blank' rel='noopener noreferrer'>
|
||
|
|
{auteur}
|
||
|
|
</Link>
|
||
|
|
) : auteur}
|
||
|
|
{estFedere && (
|
||
|
|
<Chip label='Mastodon' size='small' sx={{ml: 1}} />
|
||
|
|
)}
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='body2'>{commentaire.contenu}</Typography>
|
||
|
|
{estFedere && commentaire.remoteUrl && (
|
||
|
|
<Link href={commentaire.remoteUrl} target='_blank' rel='noopener noreferrer'>
|
||
|
|
<Typography variant='caption' color='text.secondary'>Voir sur Mastodon</Typography>
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</Box>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
Komante.propTypes = {
|
||
|
|
commentaires: PropTypes.array
|
||
|
|
}
|