57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import * as React from 'react';
|
|
import Card from '@mui/material/Card';
|
|
import CardHeader from '@mui/material/CardHeader';
|
|
import CardActionArea from '@mui/material/CardActionArea';
|
|
import CardContent from '@mui/material/CardContent';
|
|
import Typography from '@mui/material/Typography';
|
|
import { DateTime } from 'luxon';
|
|
|
|
import useFormatMessage from 'hooks/useFormatMessage';
|
|
|
|
interface NotificationCardProps {
|
|
name: string;
|
|
createdAt: string;
|
|
documentationUrl: string;
|
|
description: string;
|
|
}
|
|
|
|
const getHumanlyDate = (timestamp: number) => DateTime.fromMillis(timestamp).toRelative();
|
|
|
|
export default function NotificationCard(props: NotificationCardProps) {
|
|
const {
|
|
name,
|
|
createdAt,
|
|
documentationUrl,
|
|
description,
|
|
} = props;
|
|
|
|
const formatMessage = useFormatMessage();
|
|
const relativeCreatedAt = getHumanlyDate((new Date(createdAt)).getTime());
|
|
const subheader = formatMessage('notification.releasedAt', { relativeDate: relativeCreatedAt });
|
|
|
|
return (
|
|
<Card>
|
|
<CardActionArea
|
|
component={'a'}
|
|
href={documentationUrl}
|
|
target="_blank"
|
|
>
|
|
<CardHeader
|
|
title={name}
|
|
titleTypographyProps={{ variant: 'h6' }}
|
|
subheader={subheader}
|
|
sx={{ borderBottom: '1px solid', borderColor: 'divider'}}
|
|
/>
|
|
|
|
<CardContent>
|
|
<Typography
|
|
variant="body1"
|
|
color="text.secondary"
|
|
dangerouslySetInnerHTML={{ __html: description }}
|
|
/>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
);
|
|
}
|