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 | 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 48x | import { Typography } from "@mui/material";
import HtmlMeta from "components/HtmlMeta";
import EditCommunityPage from "features/communities/EditCommunityInfoPage";
import { useTranslation } from "i18n";
import { COMMUNITIES } from "i18n/namespaces";
import { CommunityTab } from "routes";
import makeStyles from "utils/makeStyles";
import CommunityBase from "../CommunityBase";
import CommunityInfoPage from "../CommunityInfoPage";
import { DiscussionsListPage, DiscussionsSection } from "../discussions";
import CommunityEventsList from "../events/CommunityEventsList";
import EventsSection from "../events/EventsSection";
import CommunityMembersList from "../members/CommunityMembersList";
import PageHeader from "../PageHeader";
import CommunityPageSubHeader from "./CommunityPageSubHeader";
import InfoPageSection from "./InfoPageSection";
export const useCommunityPageStyles = makeStyles((theme) => ({
title: {
marginTop: theme.spacing(3),
},
cardContainer: {
[theme.breakpoints.down("sm")]: {
//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),
},
},
loadMoreButton: {
alignSelf: "center",
display: "flex",
justifyContent: "center",
width: "100%",
},
placeEventCard: {
[theme.breakpoints.up("sm")]: {
width: "100%",
},
[theme.breakpoints.down("sm")]: {
margin: theme.spacing(0, 2, 1, 0),
},
width: "50%",
flexShrink: 0,
borderRadius: theme.shape.borderRadius * 2,
scrollSnapAlign: "start",
},
createResourceButton: {
margin: theme.spacing(2, 0),
},
}));
export default function CommunityPage({
communityId,
tab = "overview",
edit = false,
}: {
communityId: number;
tab: CommunityTab | undefined;
edit: boolean | undefined;
}) {
const { t } = useTranslation([COMMUNITIES]);
const classes = useCommunityPageStyles();
return (
<CommunityBase communityId={communityId}>
{({ community }) => {
return (
<>
<HtmlMeta title={community.name} />
{community.mainPage && <PageHeader page={community.mainPage} />}
<CommunityPageSubHeader community={community} tab={tab} />
{tab === "overview" ? (
<>
<Typography variant="h1" className={classes.title}>
{t("communities:community_header", { name: community.name })}
</Typography>
<InfoPageSection community={community} />
<EventsSection community={community} />
<DiscussionsSection community={community} />
</>
) : tab === "info" ? (
edit ? (
<EditCommunityPage communityId={community.communityId} />
) : (
<CommunityInfoPage community={community} />
)
) : tab === "discussions" ? (
<DiscussionsListPage community={community} />
) : tab === "events" ? (
<CommunityEventsList community={community} />
) : tab === "members" ? (
<CommunityMembersList communityId={community.communityId} />
) : null}
</>
);
}}
</CommunityBase>
);
}
|