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> ); } |