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 | 3x 3x 3x 3x 3x 3x 3x 3x 10x 35x 51x 10x | import { styled } from "@mui/material";
import { useAuthContext } from "features/auth/AuthProvider";
import { Event } from "proto/events_pb";
import EventCard from "./EventCard";
import LongEventCard from "./LongEventCard";
interface EventListProps {
events: Event.AsObject[];
isVerticalStyle?: boolean;
}
const StyledRoot = styled("div")({
display: "flex",
flexDirection: "column",
});
const StyledVerticalStyleContainer = styled("div")(({ theme }) => ({
display: "grid",
[theme.breakpoints.down("sm")]: {
gridTemplateColumns: "1fr",
gap: theme.spacing(2),
padding: theme.spacing(2),
//break out of page padding
left: "50%",
marginLeft: "-50vw",
marginRight: "-50vw",
position: "relative",
right: "50%",
width: "100vw",
},
[theme.breakpoints.up("sm")]: {
display: "grid",
gridTemplateColumns: "repeat(2, 1fr)",
gap: theme.spacing(2),
},
[theme.breakpoints.up("md")]: {
gridTemplateColumns: "repeat(3, 1fr)",
gap: theme.spacing(3),
},
}));
const DEFAULT_EVENTS: Event.AsObject[] = [];
const EventsList = ({
events = DEFAULT_EVENTS,
isVerticalStyle = false,
}: EventListProps) => {
const {
authState: { userId },
} = useAuthContext();
return (
<StyledRoot>
{isVerticalStyle ? (
<StyledVerticalStyleContainer>
{events.map((event) => (
<EventCard key={event.eventId} event={event} />
))}
</StyledVerticalStyleContainer>
) : (
events.map((event) => (
<LongEventCard key={event.eventId} event={event} userId={userId} />
))
)}
</StyledRoot>
);
};
export default EventsList;
|