113 lines
3.6 KiB
React
113 lines
3.6 KiB
React
'use client'
|
|
|
|
import PropTypes from 'prop-types'
|
|
import Box from '@mui/material/Box'
|
|
import Stack from '@mui/material/Stack'
|
|
import Avatar from '@mui/material/Avatar'
|
|
import Typography from '@mui/material/Typography'
|
|
import Chip from '@mui/material/Chip'
|
|
import Link from 'next/link'
|
|
import {Mastodon} from '@icons-pack/react-simple-icons'
|
|
|
|
function formatAuteur(commentaire) {
|
|
if (commentaire.origine === 'activitypub') {
|
|
return commentaire.auteurNom || commentaire.auteurHandle || 'Yon moun'
|
|
}
|
|
|
|
return commentaire.user?.username || 'Anonim'
|
|
}
|
|
|
|
function formatDat(commentaire) {
|
|
if (!commentaire.datePublication) {
|
|
return null
|
|
}
|
|
|
|
return new Intl.DateTimeFormat(undefined, {dateStyle: 'short', timeStyle: 'short'})
|
|
.format(new Date(commentaire.datePublication))
|
|
}
|
|
|
|
const MENTION_REGEX = /(?:@[\w.-]+){1,2}/g
|
|
|
|
function metanValèMansyon(contenu) {
|
|
const mansyon = contenu.match(MENTION_REGEX) || []
|
|
return contenu.split(MENTION_REGEX).flatMap((moso, index) => (
|
|
mansyon[index] ? [
|
|
moso,
|
|
<Box key={index} component='span' sx={{color: 'primary.main', fontWeight: 700}}>
|
|
{mansyon[index]}
|
|
</Box>
|
|
] : [moso]
|
|
))
|
|
}
|
|
|
|
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è ({commentaires.length})
|
|
</Typography>
|
|
<Stack spacing={1.5}>
|
|
{commentaires.map(commentaire => {
|
|
const auteur = formatAuteur(commentaire)
|
|
const estFedere = commentaire.origine === 'activitypub'
|
|
const dat = formatDat(commentaire)
|
|
|
|
return (
|
|
<Box
|
|
key={commentaire.id}
|
|
sx={{
|
|
display: 'flex',
|
|
gap: 1.5,
|
|
p: 2,
|
|
borderRadius: 2,
|
|
bgcolor: 'action.hover'
|
|
}}
|
|
>
|
|
<Avatar src={commentaire.auteurAvatarUrl} alt={auteur} />
|
|
<Box sx={{flex: 1, minWidth: 0}}>
|
|
<Stack direction='row' alignItems='center' flexWrap='wrap' rowGap={0.5}>
|
|
<Stack direction='row' alignItems='center' spacing={1}>
|
|
<Typography variant='subtitle2' component='div'>
|
|
{estFedere && commentaire.auteurProfilUrl ? (
|
|
<Link href={commentaire.auteurProfilUrl} target='_blank' rel='noopener noreferrer'>
|
|
{auteur}
|
|
</Link>
|
|
) : auteur}
|
|
</Typography>
|
|
{estFedere && (
|
|
<Chip
|
|
label='Mastodon'
|
|
size='small'
|
|
icon={<Mastodon size={14} color='#6364FF' title='' />}
|
|
/>
|
|
)}
|
|
</Stack>
|
|
{dat && (
|
|
<Typography variant='caption' color='text.secondary' sx={{ml: 'auto', pl: 2}}>
|
|
{dat}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
<Typography variant='body2' sx={{mt: 0.5}}>{metanValèMansyon(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>
|
|
)
|
|
})}
|
|
</Stack>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
Komante.propTypes = {
|
|
commentaires: PropTypes.array
|
|
}
|