Simple profile page

packages/web/components/Container.tsx

@@ -1,7 +1,8 @@
-import { Flex } from '@metafam/ds';
+import { Box, Flex } from '@metafam/ds';
 import React from 'react';
 
 type Props = React.ComponentProps<typeof Flex>;
+type BoxProps = React.ComponentProps<typeof Box>;
 
 export const PageContainer: React.FC<Props> = ({ children, ...props }) => (
   <Flex
@@ -22,3 +23,12 @@ export const FlexContainer: React.FC<Props> = ({ children, ...props }) => (
     {children}
   </Flex>
 );
+
+export const MaxWidthContainer: React.FC<BoxProps> = ({
+  children,
+  ...props
+}) => (
+  <Box w="100%" maxW="1358px" mx="auto" px="2rem" {...props}>
+    {children}
+  </Box>
+);

packages/web/components/PageHeader.tsx

@@ -0,0 +1,27 @@
+import { Button, ButtonGroup, Flex, Image } from '@metafam/ds';
+import { MetaLink } from 'components/Link';
+import React from 'react';
+
+import MetaGameImage from '../public/images/metagame.png';
+
+export const PageHeader: React.FC = () => (
+  <Flex align="center" pt="1rem" pb="2rem" px="2rem">
+    <MetaLink as="/" href="/" display="block" mr="2rem">
+      <Image src={MetaGameImage} />
+    </MetaLink>
+    <ButtonGroup spacing="3rem">
+      <Button variant="link" color="offwhite">
+        Quests
+      </Button>
+      <Button variant="link" color="offwhite">
+        Raids
+      </Button>
+      <Button variant="link" color="offwhite">
+        Players
+      </Button>
+      <Button variant="link" color="offwhite">
+        Forum
+      </Button>
+    </ButtonGroup>
+  </Flex>
+);

packages/web/pages/player/[username].tsx

@@ -1,4 +1,14 @@
-import { Avatar, Box, Heading } from '@metafam/ds';
+import {
+  Avatar,
+  Box,
+  Flex,
+  MetaBox,
+  MetaTag,
+  SimpleGrid,
+  Text,
+} from '@metafam/ds';
+import { MaxWidthContainer } from 'components/Container';
+import { PageHeader } from 'components/PageHeader';
 import {
   GetStaticPaths,
   GetStaticPropsContext,
@@ -7,9 +17,9 @@ import {
 import Error from 'next/error';
 import React from 'react';
 
-import { PageContainer } from '../../components/Container';
 import { getPlayer } from '../../graphql/getPlayer';
 import { getPlayers } from '../../graphql/getPlayers';
+import BackgroundImage from '../../public/images/login-background.jpg';
 import { getPlayerImage, getPlayerName } from '../../utils/playerHelpers';
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
@@ -20,18 +30,61 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
   }
 
   return (
-    <PageContainer>
-      <Box>
-        <Heading size="md" textAlign="center">
-          {player.username}
-        </Heading>
-        <Avatar
-          size="xl"
-          src={getPlayerImage(player)}
-          name={getPlayerName(player)}
-        />
+    <>
+      <PageHeader />
+      <Box bgImage={`url(${BackgroundImage})`} h="230px" mb="1.5rem">
+        <MaxWidthContainer>
+          <Flex pos="relative" top="4.5rem" align="center">
+            <Avatar
+              size="3xl"
+              w="12.5rem"
+              h="12.5rem"
+              src={getPlayerImage(player)}
+              name={getPlayerName(player)}
+            />
+
+            <Box pl="2.5rem" mt="-2rem">
+              <Text fontSize="xl" fontFamily="heading" mb="0.25rem">
+                {getPlayerName(player)}
+              </Text>
+              <Text fontFamily="body" fontSize="md" textTransform="uppercase">
+                Personality type
+              </Text>
+              <Box mt="4">
+                <MetaTag
+                  backgroundColor={player.rank?.toLowerCase()}
+                  mr="3"
+                  size="md"
+                  color="blackAlpha.600"
+                >
+                  {player.rank}
+                </MetaTag>
+                <MetaTag size="md">XP: {Math.floor(player.totalXp)}</MetaTag>
+              </Box>
+            </Box>
+          </Flex>
+        </MaxWidthContainer>
       </Box>
-    </PageContainer>
+      <MaxWidthContainer>
+        <SimpleGrid columns={[1, 1, 2, 3]} spacing="2rem" pt="3rem">
+          <MetaBox title="About me">
+            <Text fontFamily="body" fontSize="2xl" fontWeight="bold" mb={4}>
+              Box 1
+            </Text>
+          </MetaBox>
+          <MetaBox title="Skills">
+            <Text fontFamily="body" fontSize="2xl" fontWeight="bold" mb={4}>
+              Box 2
+            </Text>
+          </MetaBox>
+          <MetaBox title="Memberships">
+            <Text fontFamily="body" fontSize="2xl" fontWeight="bold" mb={4}>
+              Box 3
+            </Text>
+          </MetaBox>
+        </SimpleGrid>
+      </MaxWidthContainer>
+    </>
   );
 };