Added more pages in about us

src/pages/about-us/accords-handbook.tsx

@@ -0,0 +1,87 @@
+import AppLayout from "components/AppLayout";
+import Markdawn from "components/Markdown/Markdawn";
+import TOC from "components/Markdown/TOC";
+import ReturnButton, {
+  ReturnButtonType,
+} from "components/PanelComponents/ReturnButton";
+import ContentPanel from "components/Panels/ContentPanel";
+import SubPanel from "components/Panels/SubPanel";
+import { getPost } from "graphql/operations";
+import { GetPostQuery } from "graphql/operations-types";
+import { GetStaticProps } from "next";
+import { useRouter } from "next/router";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import { prettySlug } from "queries/helpers";
+
+interface AccordsHandbookProps extends AppStaticProps {
+  post: GetPostQuery["posts"]["data"][number]["attributes"];
+}
+
+export default function AccordsHandbook(
+  props: AccordsHandbookProps
+): JSX.Element {
+  const { langui, post } = props;
+  const router = useRouter();
+
+  const subPanel = (
+    <SubPanel>
+      <ReturnButton
+        href="/about-us"
+        displayOn={ReturnButtonType.Desktop}
+        langui={langui}
+        title={langui.about_us}
+        horizontalLine
+      />
+      {post.translations.length > 0 && post.translations[0].body && (
+        <TOC
+          text={post.translations[0].body}
+          router={router}
+          title={post.translations[0].title}
+        />
+      )}
+    </SubPanel>
+  );
+
+  const contentPanel = (
+    <ContentPanel>
+      <ReturnButton
+        href="/about-us"
+        displayOn={ReturnButtonType.Mobile}
+        langui={langui}
+        title={langui.about_us}
+        className="mb-10"
+      />
+      {post.translations.length > 0 && (
+        <Markdawn router={router} text={post.translations[0].body} />
+      )}
+    </ContentPanel>
+  );
+
+  return (
+    <AppLayout
+      navTitle={
+        post.translations.length > 0
+          ? post.translations[0].title
+          : prettySlug(post.slug)
+      }
+      subPanel={subPanel}
+      contentPanel={contentPanel}
+      {...props}
+    />
+  );
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const props: AccordsHandbookProps = {
+    ...(await getAppStaticProps(context)),
+    post: (
+      await getPost({
+        slug: "accords-handbook",
+        language_code: context.locale || "en",
+      })
+    ).posts.data[0].attributes,
+  };
+  return {
+    props: props,
+  };
+};

src/pages/about-us/index.tsx

@@ -16,13 +16,13 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
         title={langui.about_us}
         description={langui.about_us_description}
       />
-      <NavOption title="Accord’s Handbook" url="/about-us/handbook" border />
+      <NavOption title="Accord’s Handbook" url="/about-us/accords-handbook" border />
       <NavOption
-        title="Site information"
-        url="/about-us/site-information"
+        title="Legality"
+        url="/about-us/legality"
         border
       />
-      <NavOption title="FAQ" url="/about-us/faq" border />
+      <NavOption title="Members" url="/about-us/members" border />
       <NavOption title="Sharing Policy" url="/about-us/sharing-policy" border />
       <NavOption title="Contact us" url="/about-us/contact" border />
     </SubPanel>

src/pages/about-us/legality.tsx

@@ -1,12 +1,15 @@
 import AppLayout from "components/AppLayout";
 import Markdawn from "components/Markdown/Markdawn";
+import TOC from "components/Markdown/TOC";
 import ReturnButton, {
   ReturnButtonType,
 } from "components/PanelComponents/ReturnButton";
 import ContentPanel from "components/Panels/ContentPanel";
+import SubPanel from "components/Panels/SubPanel";
 import { getPost } from "graphql/operations";
 import { GetPostQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
+import { useRouter } from "next/router";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
 import { prettySlug } from "queries/helpers";
 
@@ -16,17 +19,38 @@ interface SiteInfoProps extends AppStaticProps {
 
 export default function SiteInformation(props: SiteInfoProps): JSX.Element {
   const { langui, post } = props;
+  const router = useRouter();
+
+  const subPanel = (
+    <SubPanel>
+      <ReturnButton
+        href="/about-us"
+        displayOn={ReturnButtonType.Desktop}
+        langui={langui}
+        title={langui.about_us}
+        horizontalLine
+      />
+      {post.translations.length > 0 && post.translations[0].body && (
+        <TOC
+          text={post.translations[0].body}
+          router={router}
+          title={post.translations[0].title}
+        />
+      )}
+    </SubPanel>
+  );
+
   const contentPanel = (
     <ContentPanel>
       <ReturnButton
         href="/about-us"
-        displayOn={ReturnButtonType.Both}
+        displayOn={ReturnButtonType.Mobile}
         langui={langui}
         title={langui.about_us}
         className="mb-10"
       />
       {post.translations.length > 0 && (
-        <Markdawn text={post.translations[0].body} />
+        <Markdawn router={router} text={post.translations[0].body} />
       )}
     </ContentPanel>
   );
@@ -38,6 +62,7 @@ export default function SiteInformation(props: SiteInfoProps): JSX.Element {
           ? post.translations[0].title
           : prettySlug(post.slug)
       }
+      subPanel={subPanel}
       contentPanel={contentPanel}
       {...props}
     />
@@ -49,7 +74,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
     ...(await getAppStaticProps(context)),
     post: (
       await getPost({
-        slug: "site-information",
+        slug: "legality",
         language_code: context.locale || "en",
       })
     ).posts.data[0].attributes,

src/pages/about-us/sharing-policy.tsx

@@ -0,0 +1,85 @@
+import AppLayout from "components/AppLayout";
+import Markdawn from "components/Markdown/Markdawn";
+import TOC from "components/Markdown/TOC";
+import ReturnButton, {
+  ReturnButtonType,
+} from "components/PanelComponents/ReturnButton";
+import ContentPanel from "components/Panels/ContentPanel";
+import SubPanel from "components/Panels/SubPanel";
+import { getPost } from "graphql/operations";
+import { GetPostQuery } from "graphql/operations-types";
+import { GetStaticProps } from "next";
+import { useRouter } from "next/router";
+import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import { prettySlug } from "queries/helpers";
+
+interface SharingPolicyProps extends AppStaticProps {
+  post: GetPostQuery["posts"]["data"][number]["attributes"];
+}
+
+export default function SharingPolicy(props: SharingPolicyProps): JSX.Element {
+  const { langui, post } = props;
+  const router = useRouter();
+
+  const subPanel = (
+    <SubPanel>
+      <ReturnButton
+        href="/about-us"
+        displayOn={ReturnButtonType.Desktop}
+        langui={langui}
+        title={langui.about_us}
+        horizontalLine
+      />
+      {post.translations.length > 0 && post.translations[0].body && (
+        <TOC
+          text={post.translations[0].body}
+          router={router}
+          title={post.translations[0].title}
+        />
+      )}
+    </SubPanel>
+  );
+
+  const contentPanel = (
+    <ContentPanel>
+      <ReturnButton
+        href="/about-us"
+        displayOn={ReturnButtonType.Mobile}
+        langui={langui}
+        title={langui.about_us}
+        className="mb-10"
+      />
+      {post.translations.length > 0 && (
+        <Markdawn router={router} text={post.translations[0].body} />
+      )}
+    </ContentPanel>
+  );
+
+  return (
+    <AppLayout
+      navTitle={
+        post.translations.length > 0
+          ? post.translations[0].title
+          : prettySlug(post.slug)
+      }
+      subPanel={subPanel}
+      contentPanel={contentPanel}
+      {...props}
+    />
+  );
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const props: SharingPolicyProps = {
+    ...(await getAppStaticProps(context)),
+    post: (
+      await getPost({
+        slug: "sharing-policy",
+        language_code: context.locale || "en",
+      })
+    ).posts.data[0].attributes,
+  };
+  return {
+    props: props,
+  };
+};