feat: introduce notifications page

packages/web/src/components/NotificationCard/index.tsx

@@ -0,0 +1,56 @@
+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>
+  );
+}