76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import { truncate } from '@/utils/HelperUtil'
|
|
import { Avatar, Button, Card, Link, Text, Tooltip } from '@nextui-org/react'
|
|
import Image from 'next/image'
|
|
|
|
/**
|
|
* Types
|
|
*/
|
|
interface IProps {
|
|
logo?: string
|
|
title?: string
|
|
body?: string
|
|
url?: string
|
|
publishedAt?: number
|
|
onDelete: () => Promise<void>
|
|
}
|
|
|
|
/**
|
|
* Component
|
|
*/
|
|
export default function NotificationItem({
|
|
logo,
|
|
title,
|
|
body,
|
|
url,
|
|
publishedAt,
|
|
onDelete
|
|
}: IProps) {
|
|
return (
|
|
<Card
|
|
bordered
|
|
borderWeight="light"
|
|
css={{
|
|
position: 'relative',
|
|
marginBottom: '$6',
|
|
minHeight: '70px'
|
|
}}
|
|
>
|
|
<Card.Body
|
|
css={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
<Avatar src={logo} />
|
|
<div style={{ flex: 1 }}>
|
|
<Text h5 css={{ marginLeft: '$9' }}>
|
|
{title}
|
|
</Text>
|
|
{/* <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
|
|
</div> */}
|
|
<Text h6 css={{ marginLeft: '$9' }}>
|
|
{body}
|
|
</Text>
|
|
{publishedAt && (
|
|
<Text span css={{ marginLeft: '$9', fontSize: '12px' }}>
|
|
{new Date(publishedAt).toLocaleDateString()} -{' '}
|
|
{new Date(publishedAt).toLocaleTimeString()}
|
|
</Text>
|
|
)}
|
|
<Link href={url} css={{ marginLeft: '$9' }} target="_blank" rel="noopener noreferrer">
|
|
{url}
|
|
</Link>
|
|
</div>
|
|
<Tooltip content="Delete" placement="left">
|
|
<Button size="sm" color="error" flat onClick={onDelete} css={{ minWidth: 'auto' }}>
|
|
<Image src={'/icons/delete-icon.svg'} width={15} height={15} alt="delete icon" />
|
|
</Button>
|
|
</Tooltip>
|
|
</Card.Body>
|
|
</Card>
|
|
)
|
|
}
|