Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { Box, Card, CardContent, styled, Typography, useMediaQuery } from "@mui/material";
import SliderLabel from "components/RatingsSlider/SliderLabel";
import TextBody from "components/TextBody";
import UserSummary from "components/UserSummary";
import { useProfileUser } from "features/profile/hooks/useProfileUser";
import { ReferenceContextFormData } from "features/profile/view/leaveReference/ReferenceForm";
import { useTranslation } from "i18n";
import { GLOBAL, PROFILE } from "i18n/namespaces";
import { theme } from "theme";
const StyledTextBody = styled(TextBody)(({ theme }) => ({
"& > .MuiInputBase-root": {
width: "100%",
},
marginTop: theme.spacing(1),
[theme.breakpoints.up("md")]: {
"& > .MuiInputBase-root": {
width: 400,
},
},
}));
const StyledTypography = styled(Typography)(({ theme }) => ({
"& > .MuiInputBase-root": {
width: "100%",
},
marginTop: theme.spacing(1),
[theme.breakpoints.up("md")]: {
"& > .MuiInputBase-root": {
width: 400,
},
},
}));
const StyledCard = styled(Card)(({ theme }) => ({
marginTop: theme.spacing(2),
marginBottom: theme.spacing(1),
}));
export default function ReferenceOverview({ referenceData }: { referenceData: ReferenceContextFormData }) {
const { t } = useTranslation([GLOBAL, PROFILE]);
const user = useProfileUser();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
return (
<>
<StyledTextBody>{t("profile:leave_reference.thank_you_message")}</StyledTextBody>
{isMobile && (
<Box sx={{ margin: theme.spacing(2, 0) }}>
<TextBody sx={{ marginBottom: theme.spacing(2) }}>{t("profile:leave_reference.writing_for_text")}</TextBody>
<UserSummary user={user} />
</Box>
)}
<StyledTypography variant="h3" sx={{ marginTop: theme.spacing(3) }}>
{t("profile:leave_reference.public_text_label", { name: user.name })}
</StyledTypography>
<StyledCard>
<CardContent>
<TextBody sx={{ whiteSpace: "pre-wrap" }}>{referenceData.text}</TextBody>
</CardContent>
</StyledCard>
<StyledTypography variant="h3" sx={{ marginTop: theme.spacing(3) }}>
{t("profile:leave_reference.private_text_label")}
</StyledTypography>
<ul>
<li>
<StyledTextBody>
{referenceData.wasAppropriate === "true"
? t("profile:leave_reference.yes_safe")
: t("profile:leave_reference.no_not_safe")}
</StyledTextBody>
</li>
<li>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Typography sx={{ paddingRight: theme.spacing(1) }}>{t("profile:leave_reference.rating_label")}</Typography>
<SliderLabel value={referenceData.rating} />
</Box>
</li>
</ul>
{referenceData.privateText && referenceData.privateText.length > 0 && (
<>
<StyledTypography variant="h3" sx={{ marginTop: theme.spacing(3) }}>
{t("profile:leave_reference.private_text_summary")}
</StyledTypography>
<StyledCard>
<CardContent>
<TextBody sx={{ whiteSpace: "pre-wrap" }}>{referenceData.privateText}</TextBody>
</CardContent>
</StyledCard>
</>
)}
</>
);
}
|