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 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 28x 7x 28x 28x 28x 28x 28x 24x 28x 28x | import {
Card,
Theme,
Typography,
useMediaQuery,
useTheme,
} from "@material-ui/core";
import { eventImagePlaceholderUrl } from "appConstants";
import { AttendeesIcon, CalendarIcon } from "components/Icons";
import { useTranslation } from "i18n";
import { COMMUNITIES } from "i18n/namespaces";
import Link from "next/link";
import { Event } from "proto/events_pb";
import { useMemo } from "react";
import { routeToEvent } from "routes";
import { timestamp2Date } from "utils/date";
import dayjs from "utils/dayjs";
import makeStyles from "utils/makeStyles";
import getContentSummary from "../getContentSummary";
const useStyles = makeStyles<Theme, { eventImageSrc: string }>((theme) => ({
overviewRoot: {
"&:hover": {
backgroundColor: theme.palette.grey[50],
},
padding: theme.spacing(1),
[theme.breakpoints.up("sm")]: {
padding: theme.spacing(2),
},
},
overviewContent: {
display: "grid",
gap: theme.spacing(1),
gridTemplateAreas: `
"titles image"
"content content"
`,
gridTemplateColumns: "1fr 1fr",
[theme.breakpoints.up("md")]: {
gridTemplateColumns: "2fr 1fr",
},
},
eventInfoContainer: {
gridArea: "titles",
},
eventTimeContainer: {
alignItems: "center",
display: "flex",
marginBlockStart: theme.spacing(1),
},
attendeesCountContainer: {
alignItems: "center",
display: "flex",
},
icon: {
display: "block",
fontSize: "1.25rem",
lineHeight: 1.5,
marginInlineEnd: theme.spacing(0.5),
},
image: {
objectFit: ({ eventImageSrc }) =>
eventImageSrc === eventImagePlaceholderUrl ? "contain" : "cover",
height: 80,
[theme.breakpoints.up("md")]: {
height: 120,
},
width: "100%",
gridArea: "image",
},
onlineOrOfflineInfo: {
fontWeight: "bold",
color: theme.palette.grey[600],
},
content: {
gridArea: "content",
},
}));
export interface LongEventCardProps {
event: Event.AsObject;
}
export default function LongEventCard({ event }: LongEventCardProps) {
const { t } = useTranslation([COMMUNITIES]);
const classes = useStyles({
eventImageSrc: event.photoUrl || eventImagePlaceholderUrl,
});
const theme = useTheme();
const isBelowLg = useMediaQuery(theme.breakpoints.down("md"));
const truncatedContent = useMemo(
() =>
getContentSummary({
originalContent: event.content,
maxLength: isBelowLg ? 120 : 300,
}),
[event.content, isBelowLg]
);
const startTime = dayjs(timestamp2Date(event.startTime!));
return (
<Card className={classes.overviewRoot}>
<Link href={routeToEvent(event.eventId, event.slug)}>
<a className={classes.overviewContent}>
<div className={classes.eventInfoContainer}>
<Typography variant="h2">{event.title}</Typography>
<Typography
className={classes.onlineOrOfflineInfo}
color="primary"
variant="body1"
>
{event.offlineInformation
? event.offlineInformation.address
: t("communities:online")}
</Typography>
<div className={classes.eventTimeContainer}>
<CalendarIcon className={classes.icon} />
<Typography variant="body1">
{startTime.format("ll LT")}
</Typography>
</div>
<div className={classes.attendeesCountContainer}>
<AttendeesIcon className={classes.icon} />
<Typography variant="body1">
{t("communities:attendees_count", {
count: event.goingCount + event.maybeCount,
})}
</Typography>
</div>
</div>
<Typography className={classes.content} variant="body1">
{truncatedContent}
</Typography>
<img
alt=""
className={classes.image}
src={event.photoUrl || eventImagePlaceholderUrl}
/>
</a>
</Link>
</Card>
);
}
|