45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { SnAttachment } from '@/services/attachment'
|
|
import { getAttachmentUrl } from '@/services/network'
|
|
import { QuestionMark } from '@mui/icons-material'
|
|
import { Link, Paper, Typography } from '@mui/material'
|
|
import { ComponentProps } from 'react'
|
|
|
|
export function AttachmentItem({
|
|
item,
|
|
borderRadius,
|
|
...rest
|
|
}: { item: SnAttachment; borderRadius?: string } & ComponentProps<'div'>) {
|
|
switch (item.mimetype.split('/')[0]) {
|
|
case 'image':
|
|
return (
|
|
<Paper {...rest}>
|
|
<img
|
|
src={getAttachmentUrl(item.rid)}
|
|
alt={item.alt}
|
|
style={{ objectFit: 'cover', borderRadius: borderRadius ?? '8px' }}
|
|
/>
|
|
</Paper>
|
|
)
|
|
case 'video':
|
|
return (
|
|
<Paper {...rest}>
|
|
<video src={getAttachmentUrl(item.rid)} controls style={{ borderRadius: borderRadius ?? '8px' }} />
|
|
</Paper>
|
|
)
|
|
default:
|
|
return (
|
|
<Paper sx={{ width: '100%', height: '100%', p: 5, textAlign: 'center' }} {...rest}>
|
|
<QuestionMark sx={{ mb: 2 }} />
|
|
<Typography>Unknown</Typography>
|
|
<Typography gutterBottom>{item.name}</Typography>
|
|
<Typography fontFamily="monospace" gutterBottom>
|
|
{item.mimetype}
|
|
</Typography>
|
|
<Link href={getAttachmentUrl(item.rid)} target="_blank" rel="noreferrer" fontSize={13}>
|
|
Open in browser
|
|
</Link>
|
|
</Paper>
|
|
)
|
|
}
|
|
}
|