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 | 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 42x 42x 42x 42x 42x 42x 42x 42x 42x 42x | import { TabContext } from "@mui/lab";
import { Breadcrumbs, styled, Typography } from "@mui/material";
import BetaFlag from "components/BetaFlag";
import StyledLink from "components/StyledLink";
import TabBar from "components/TabBar";
import { useTranslation } from "i18n";
import { COMMUNITIES, PUBLIC_TRIPS } from "i18n/namespaces";
import { useRouter } from "next/router";
import { Community } from "proto/communities_pb";
import { CommunityParent } from "proto/groups_pb";
import { ReactNode } from "react";
import { CommunityTab, routeToCommunity } from "routes";
import JoinCommunityButton from "./JoinCommunityButton";
const StyledBreadcrumbsContainer = styled("div")(() => ({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}));
const StyledBreadcrumbs = styled(Breadcrumbs)(() => ({
"& ol": {
justifyContent: "flex-start",
},
}));
export default function CommunityPageSubHeader({
community,
tab,
}: {
community: Community.AsObject;
tab: CommunityTab;
}) {
const { t } = useTranslation([COMMUNITIES, PUBLIC_TRIPS]);
const isPublicTripsEnabled = process.env.NODE_ENV !== "production";
const router = useRouter();
const communityTabBarLabels: Partial<
Record<CommunityTab, string | ReactNode>
> = {
overview: t("communities:overview_label"),
info: t("communities:local_info_label"),
...(community.smallCommunityFeaturesEnabled && {
...(isPublicTripsEnabled && {
"public-trips": (
<span style={{ display: "inline-flex", alignItems: "center" }}>
{t("publicTrips:label")}
<BetaFlag />
</span>
),
}),
discussions: t("communities:discussions_label"),
events: t("communities:events_label"),
}),
members: t("communities:members_label"),
};
return (
<>
<StyledBreadcrumbsContainer>
<StyledBreadcrumbs
aria-label={t("communities:community_breadcrumb_a11y")}
>
{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="var(--mui-palette-text-primary)"
key={`breadcrumb-${communityParent?.communityId}`}
>
{communityParent.name}
</Typography>
) : (
<StyledLink
href={routeToCommunity(
communityParent.communityId,
communityParent.slug,
)}
key={`breadcrumb-${communityParent?.communityId}`}
>
{communityParent.name}
</StyledLink>
),
)}
</StyledBreadcrumbs>
<JoinCommunityButton community={community} />
</StyledBreadcrumbsContainer>
<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>
</>
);
}
|