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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 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>
</>
)}
</>
);
}
|