reverse-proxy-frontend/src/features/releaseNotes/components/ReleaseNotesSummary.js

43 lines
1.3 KiB
JavaScript

import React from "react";
import PropTypes from "prop-types";
import { Grid, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { useTranslation } from "react-i18next";
import styles from "../../../components/common/styles/gridStyles";
const useStyles = makeStyles(styles);
const ReleaseNotesSummary = ({ releaseNote, collapsed }) => {
const classes = useStyles();
const { t } = useTranslation();
return (
<Grid container className={classes.miniContainer}>
<Grid item xs={6} sm={2} md={2}>
<Typography variant={collapsed ? "subtitle2" : "h6"}>
{`${t("ReleaseNotes.Version")}: ${releaseNote.version}`}
</Typography>
</Grid>
<Grid item xs={6} sm={2} md={collapsed ? 2 : 4}>
<Typography variant={collapsed ? "subtitle2" : "h6"}>
{`${t("ReleaseNotes.Date")}: ${t("DATE_FORMAT", {
date: { value: releaseNote.date, format: "DD-MM-YYYY HH:mm" }
})}`}
</Typography>
</Grid>
{collapsed && (
<Grid item xs={12} sm={8} md={8}>
<Typography variant="body2">{releaseNote.notes[0]}</Typography>
</Grid>
)}
</Grid>
);
};
ReleaseNotesSummary.propTypes = {
releaseNote: PropTypes.object.isRequired,
collapsed: PropTypes.bool.isRequired
};
export default ReleaseNotesSummary;