All files / app/features/communities/events EventsPage.tsx

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
1x
1x
1x
1x
1x
 
1x
1x
1x
 
1x
 
1x
8x
8x
 
8x
 
 
 
 
8x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Typography } from "@material-ui/core";
import { TabContext, TabPanel } from "@material-ui/lab";
import HtmlMeta from "components/HtmlMeta";
import PageTitle from "components/PageTitle";
import TabBar from "components/TabBar";
import { EventsType } from "features/queryKeys";
import { useTranslation } from "i18n";
import { COMMUNITIES, GLOBAL } from "i18n/namespaces";
import { useState } from "react";
 
import EventsTab from "./EventsTab";
 
export default function EventsPage() {
  const { t } = useTranslation([GLOBAL, COMMUNITIES]);
  const [tab, setTab] = useState<EventsType>("upcoming");
 
  const allEventsPageTabLabels: Record<EventsType, string> = {
    upcoming: t("communities:upcoming"),
    past: t("communities:past"),
  };
 
  return (
    <>
      <HtmlMeta title={t("global:nav.events")} />
      <PageTitle>{t("communities:discover_events_title")}</PageTitle>
      <Typography variant="body1">
        {t("communities:discover_events_subtitle")}
      </Typography>
      <TabContext value={tab}>
        <TabBar
          ariaLabel={t("communities:all_events_page_tabs_a11y_label")}
          setValue={setTab}
          labels={allEventsPageTabLabels}
        />
        <TabPanel value="upcoming">
          <EventsTab tabTitle={t("communities:upcoming")} />
        </TabPanel>
        <TabPanel value="past">
          <EventsTab pastEvents tabTitle={t("communities:past")} />
        </TabPanel>
      </TabContext>
    </>
  );
}