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 | 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 12x 12x 12x 12x 12x 12x | import { TabContext } from "@mui/lab";
import { Breadcrumbs, Typography } from "@mui/material";
import makeStyles from "@mui/styles/makeStyles";
import StyledLink from "components/StyledLink";
import TabBar from "components/TabBar";
import { useTranslation } from "i18n";
import { COMMUNITIES } from "i18n/namespaces";
import { useRouter } from "next/router";
import { Community } from "proto/communities_pb";
import { CommunityParent } from "proto/groups_pb";
import { CommunityTab, routeToCommunity } from "routes";
import JoinCommunityButton from "./JoinCommunityButton";
export const useCommunitySubHeaderStyles = makeStyles((theme) => ({
breadcrumbsContainer: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
},
breadcrumbs: {
"& ol": {
justifyContent: "flex-start",
},
},
}));
export default function CommunityPageSubHeader({
community,
tab,
}: {
community: Community.AsObject;
tab: CommunityTab;
}) {
const { t } = useTranslation([COMMUNITIES]);
const classes = useCommunitySubHeaderStyles();
const router = useRouter();
const communityTabBarLabels: Record<CommunityTab, string> = {
overview: t("communities:overview_label"),
info: t("communities:local_info_label"),
discussions: t("communities:discussions_label"),
events: t("communities:events_label"),
};
return (
<>
<div className={classes.breadcrumbsContainer}>
<Breadcrumbs aria-label="breadcrumb" className={classes.breadcrumbs}>
{community.parentsList
.map((parent) => parent.community)
.filter(
(communityParent): communityParent is CommunityParent.AsObject =>
!!communityParent
)
.map((communityParent, index, array) =>
index === array.length - 1 ? (
<Typography
variant="body1"
color="textPrimary"
key={`breadcrumb-${communityParent?.communityId}`}
>
{communityParent.name}
</Typography>
) : (
<StyledLink
href={routeToCommunity(
communityParent.communityId,
communityParent.slug
)}
key={`breadcrumb-${communityParent?.communityId}`}
>
{communityParent.name}
</StyledLink>
)
)}
</Breadcrumbs>
<JoinCommunityButton community={community} />
</div>
<TabContext value={tab}>
<TabBar
ariaLabel={t("communities:community_tabs_a11y_label")}
setValue={(newTab) =>
router.push(
`${routeToCommunity(
community.communityId,
community.slug,
newTab === "overview" ? undefined : newTab
)}`
)
}
labels={communityTabBarLabels}
/>
</TabContext>
</>
);
}
|