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 | 3x 3x 3x 3x 3x 3x 3x 3x 6x 29x 29x 29x 29x 29x | import { ListItem, styled } from "@mui/material";
import Pill from "components/Pill";
import TextBody from "components/TextBody";
import UserSummary from "components/UserSummary";
import { referenceBadgeLabel } from "features/profile/constants";
import { COMMUNITIES, GLOBAL } from "i18n/namespaces";
import { useTranslation } from "next-i18next";
import { LiteUser } from "proto/api_pb";
import { Reference } from "proto/references_pb";
import { monthFormatter, timestamp2Date } from "utils/date";
export const REFERENCE_LIST_ITEM_TEST_ID = "reference-list-item";
interface ReferenceListItemProps {
isReceived: boolean;
user: LiteUser.AsObject;
reference: Reference.AsObject;
}
const StyledBadgesContainer = styled("div")(({ theme }) => ({
"& > * + *": {
marginBlockStart: theme.spacing(2),
},
display: "flex",
flexDirection: "column",
marginInlineEnd: theme.spacing(2),
minWidth: theme.spacing(9),
}));
const StyledListItem = styled(ListItem)(({ theme }) => ({
"& > * + *": {
marginBlockStart: theme.spacing(2),
},
alignItems: "flex-start",
borderBlockEnd: `${theme.typography.pxToRem(1)} solid ${
theme.palette.grey[300]
}`,
flexDirection: "column",
}));
const StyledReferencesBodyContainer = styled("div")(({ theme }) => ({
display: "flex",
width: "100%",
}));
export default function ReferenceListItem({
isReceived,
user,
reference,
}: ReferenceListItemProps) {
const {
t,
i18n: { language: locale },
} = useTranslation([GLOBAL, COMMUNITIES]);
return (
<StyledListItem data-testid={REFERENCE_LIST_ITEM_TEST_ID}>
<UserSummary user={user} />
<StyledReferencesBodyContainer>
<StyledBadgesContainer>
{isReceived && (
<Pill variant="rounded">
{referenceBadgeLabel(t)[reference.referenceType]}
</Pill>
)}
{reference.writtenTime && (
<Pill variant="rounded">
{monthFormatter(locale).format(
timestamp2Date(reference.writtenTime),
)}
</Pill>
)}
</StyledBadgesContainer>
<TextBody sx={{ whiteSpace: "pre-wrap" }}>{reference.text}</TextBody>
</StyledReferencesBodyContainer>
</StyledListItem>
);
}
|