community tabs, tablist and body

packages/web/pages/community/index.tsx

@@ -1,3 +1,106 @@
-import React from 'react';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  MetaHeading,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  VStack,
+} from '@metafam/ds';
+import { PageContainer } from 'components/Container';
+import { getPatrons, getPSeedPrice } from 'graphql/getPatrons';
+import { getGuilds } from 'graphql/queries/guild';
+import { InferGetStaticPropsType } from 'next';
+import GuildsPage from 'pages/guilds';
+import PatronsPage from 'pages/patrons';
+import Players from 'pages/players';
+import React, { useEffect, useState } from 'react';
 
-export const UnifiedCommunityPage: React.FC = () => <div>UnifiedCommunit</div>;
+type Props = InferGetStaticPropsType<typeof getStaticProps>;
+
+export const getStaticProps = async () => {
+  const patronsLimit = 150;
+  const patrons = await getPatrons(patronsLimit);
+  const pSeedPrice = await getPSeedPrice().catch((error) => {
+    console.error('Error fetching pSeed price', error);
+    return null;
+  });
+  return {
+    props: {
+      guilds: await getGuilds(),
+      patrons,
+      pSeedPrice,
+    },
+    revalidate: 1,
+  };
+};
+
+const UnifiedCommunityPage: React.FC<Props> = ({
+  guilds,
+  patrons,
+  pSeedPrice,
+}) => (
+  <PageContainer>
+    <VStack>
+      <MetaHeading>Community</MetaHeading>
+      <Box>
+        <Tabs
+          mt="2em"
+          w={{
+            lg: '70vw',
+          }}
+        >
+          <TabList ml={{ sm: '0em', lg: '4em' }} mr={{ sm: '0em', lg: '4em' }}>
+            <Tab
+              _selected={{
+                color: 'teal.200',
+                borderBottom: '2px solid #81E6D9',
+              }}
+              w="100%"
+            >
+              Players
+            </Tab>
+            <Tab
+              _selected={{
+                color: 'teal.200',
+                borderBottom: '2px solid #81E6D9',
+              }}
+              w="100%"
+            >
+              Guilds
+            </Tab>
+            <Tab
+              _selected={{
+                color: 'teal.200',
+                borderBottom: '2px solid #81E6D9',
+              }}
+              w="100%"
+            >
+              Patrons
+            </Tab>
+            {/* <Tab _selected={{ color: 'teal.200' }} w='100%'>Elders</Tab> */}
+          </TabList>
+          <TabPanels w="100%" p="0">
+            <TabPanel>
+              <Players />
+            </TabPanel>
+            <TabPanel>
+              <GuildsPage guilds={guilds} />
+            </TabPanel>
+            <TabPanel>
+              <PatronsPage patrons={patrons} pSeedPrice={pSeedPrice} />
+            </TabPanel>
+            {/* <TabPanel>
+                Elders
+              </TabPanel> */}
+          </TabPanels>
+        </Tabs>
+      </Box>
+    </VStack>
+  </PageContainer>
+);
+export default UnifiedCommunityPage;

packages/web/pages/join/guild/[guildname].tsx

@@ -114,7 +114,7 @@ const SetupGuild: React.FC = () => {
           rounded="lg"
           p="6"
           my="6"
-          w="100%"
+          w="max-content"
           align="stretch"
           justify="space-between"
         >

packages/web/pages/join/guild/index.tsx

@@ -113,15 +113,6 @@ export const GuildJoinLanding: React.FC<Props> = ({ guilds }) => {
 
         {/* Section: Tiers and Perks */}
         <TiersPerks />
-
-        {/* Section: Other guilds include... 
-          NOTES
-          - Was supposed to be limited to 6 guilds with a LOAD MORE button :(
-          - Is actually limited to first 6 guilds with VIEW ALL GUILDS button that links to https://metagame.wtf/guilds
-          - This section is not imported as a component because getStaticProps is used to get the list of guilds and it's not possible
-            to use getStaticProps in a component that is imported to a static page
-        */}
-
         <Container as="section" className="mg-guild-join-section">
           <Heading
             as="h2"

packages/web/pages/players.tsx

@@ -21,7 +21,7 @@ import React, { useEffect, useMemo, useRef } from 'react';
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
 export const getStaticProps = async (): Promise<{
-  props: { urqlState: SSRData };
+  props: { urqlState?: SSRData };
   revalidate: 1;
 }> => {
   const [ssrClient, ssrCache] = getSsrClient();