All files / app/features/communities/CommunitiesPage CommunitiesPage.tsx

0% Statements 0/20
100% Branches 0/0
0% Functions 0/4
0% Lines 0/16

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                                                                                                                                                                                     
import { styled, Typography } from "@mui/material";
import MuiLink from "@mui/material/Link";
import PageTitle from "components/PageTitle";
import useAccountInfo from "features/auth/useAccountInfo";
import CommunityBrowser from "features/dashboard/CommunityBrowser";
import { Trans, useTranslation } from "i18n";
import { DASHBOARD, GLOBAL } from "i18n/namespaces";
import React from "react";
import {
  communityCreationFormURL,
  helpCenterCommunityBuilderURL,
} from "routes";
 
const HeaderRow = styled("div")(({ theme }) => ({
  display: "flex",
  justifyContent: "flex-start",
  flexDirection: "column",
  width: "100%",
  paddingBottom: theme.spacing(2),
}));
 
const Subtitle = styled(Typography)(({ theme }) => ({
  fontWeight: "bold",
  fontSize: "1.25rem",
  paddingBottom: theme.spacing(1),
}));
 
const StyledTypography = styled(Typography)(({ theme }) => ({
  paddingBlockEnd: theme.spacing(1),
}));
 
const CommunitiesPage = () => {
  const { t } = useTranslation([GLOBAL, DASHBOARD]);
 
  const { data: accountInfo } = useAccountInfo();
 
  return (
    <>
      <div>
        <HeaderRow>
          <PageTitle>{t("nav.communities")}</PageTitle>
        </HeaderRow>
      </div>
      <Subtitle variant="h2">
        {t("dashboard:communities_welcome_title")}
      </Subtitle>
      <StyledTypography variant="body1" paragraph>
        <Trans i18nKey="dashboard:communities_intro" />
      </StyledTypography>
      <StyledTypography variant="body1" paragraph>
        <Trans i18nKey="dashboard:community_builder">
          {`Want to be an ambassador for your community and help it grow? Become a `}
          <MuiLink
            href={helpCenterCommunityBuilderURL}
            target="_blank"
            rel="noreferrer noopener"
            underline="hover"
          >
            Community Builder!
          </MuiLink>
        </Trans>
      </StyledTypography>
 
      <Subtitle variant="h2">{t("dashboard:all_communities_section")}</Subtitle>
 
      <StyledTypography variant="body1" paragraph>
        <Trans i18nKey="dashboard:all_communities_intro" />
      </StyledTypography>
 
      <StyledTypography variant="body1" paragraph>
        <Trans i18nKey="dashboard:community_missing">
          {`Is your country or city missing? `}
          <MuiLink
            href={communityCreationFormURL(accountInfo?.username)}
            target="_blank"
            rel="noreferrer noopener"
            underline="hover"
          >
            Use this form
          </MuiLink>
          {` to request it!`}
        </Trans>
      </StyledTypography>
 
      <CommunityBrowser />
    </>
  );
};
 
export default CommunitiesPage;