From 37547cf025da480f1bfb58af921fcd9bf2d17d8e Mon Sep 17 00:00:00 2001
From: Kris Urbas <krzysu@interia.pl>
Date: Fri, 21 Aug 2020 15:21:32 +0200
Subject: [PATCH] add features section

---
 packages/design-system/src/index.ts           |  3 +-
 packages/web/components/PageHeader.tsx        |  2 +-
 .../web/components/Player/PlayerFeature.tsx   | 22 ++++++++
 .../web/components/Player/PlayerFeatures.tsx  | 36 +++++++++++++
 packages/web/components/Player/PlayerHero.tsx | 35 ++++++++++++
 packages/web/pages/player/[username].tsx      | 54 +++----------------
 6 files changed, 103 insertions(+), 49 deletions(-)
 create mode 100644 packages/web/components/Player/PlayerFeature.tsx
 create mode 100644 packages/web/components/Player/PlayerFeatures.tsx
 create mode 100644 packages/web/components/Player/PlayerHero.tsx

diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index add8d173..47fbdbb9 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -1,11 +1,13 @@
 export {
   Avatar,
+  Badge,
   Box,
   Button,
   ButtonGroup,
   CSSReset,
   ChakraProvider,
   Center,
+  Container,
   Divider,
   Flex,
   Grid,
@@ -25,7 +27,6 @@ export {
   Wrap,
   HStack,
   VStack,
-  Container,
   useTheme,
   useToast,
 } from '@chakra-ui/core';
diff --git a/packages/web/components/PageHeader.tsx b/packages/web/components/PageHeader.tsx
index ad9fa71c..5d3d5453 100644
--- a/packages/web/components/PageHeader.tsx
+++ b/packages/web/components/PageHeader.tsx
@@ -7,7 +7,7 @@ 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} />
+      <Image src={MetaGameImage} alt="MetaGame" />
     </MetaLink>
     <ButtonGroup spacing="3rem">
       <Button variant="link" color="offwhite">
diff --git a/packages/web/components/Player/PlayerFeature.tsx b/packages/web/components/Player/PlayerFeature.tsx
new file mode 100644
index 00000000..6b1deada
--- /dev/null
+++ b/packages/web/components/Player/PlayerFeature.tsx
@@ -0,0 +1,22 @@
+import { Box, Text } from '@metafam/ds';
+import React from 'react';
+
+type Props = { title: string; value?: string | null | undefined };
+
+export const PlayerFeature: React.FC<Props> = ({ title, value, children }) => (
+  <Box>
+    <Text
+      fontFamily="body"
+      fontSize="sm"
+      fontWeight="bold"
+      color="blueLight"
+      textTransform="uppercase"
+      mb="0.5rem"
+    >
+      {title}
+    </Text>
+    <Text fontFamily="body" fontSize="md" fontWeight="bold">
+      {value || children}
+    </Text>
+  </Box>
+);
diff --git a/packages/web/components/Player/PlayerFeatures.tsx b/packages/web/components/Player/PlayerFeatures.tsx
new file mode 100644
index 00000000..43552574
--- /dev/null
+++ b/packages/web/components/Player/PlayerFeatures.tsx
@@ -0,0 +1,36 @@
+import { Badge, Divider, Wrap } from '@metafam/ds';
+import { MaxWidthContainer } from 'components/Container';
+import { PlayerFeature } from 'components/Player/PlayerFeature';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import React from 'react';
+
+type Props = { player: PlayerFragmentFragment };
+
+export const PlayerFeatures: React.FC<Props> = ({ player }) => {
+  return (
+    <MaxWidthContainer>
+      <Wrap
+        spacing="2rem"
+        ml={[0, 0, 0, '15rem']}
+        pt={['3rem', '3rem', '3rem', 0]}
+      >
+        <PlayerFeature
+          title="XP"
+          value={Math.floor(player.totalXp).toString()}
+        />
+        <Divider orientation="vertical" color="#554671" />
+        <PlayerFeature title="Level">
+          <Badge backgroundColor={player.rank?.toLowerCase()} fontSize="sm">
+            {player.rank}
+          </Badge>
+        </PlayerFeature>
+        <Divider orientation="vertical" color="#554671" />
+        <PlayerFeature title="Role" value="Define your role" />
+        <Divider orientation="vertical" color="#554671" />
+        <PlayerFeature title="Timezone" value="Define your timezone" />
+        <Divider orientation="vertical" color="#554671" />
+        <PlayerFeature title="Availability" value="20h / week" />
+      </Wrap>
+    </MaxWidthContainer>
+  );
+};
diff --git a/packages/web/components/Player/PlayerHero.tsx b/packages/web/components/Player/PlayerHero.tsx
new file mode 100644
index 00000000..e8feaa3d
--- /dev/null
+++ b/packages/web/components/Player/PlayerHero.tsx
@@ -0,0 +1,35 @@
+import { Avatar, Box, Flex, Text } from '@metafam/ds';
+import { MaxWidthContainer } from 'components/Container';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import BackgroundImage from 'public/images/login-background.jpg';
+import React from 'react';
+import { getPlayerImage, getPlayerName } from 'utils/playerHelpers';
+
+type Props = { player: PlayerFragmentFragment };
+
+export const PlayerHero: React.FC<Props> = ({ player }) => {
+  return (
+    <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>
+        </Flex>
+      </MaxWidthContainer>
+    </Box>
+  );
+};
diff --git a/packages/web/pages/player/[username].tsx b/packages/web/pages/player/[username].tsx
index 638d0ccc..45af7ea4 100644
--- a/packages/web/pages/player/[username].tsx
+++ b/packages/web/pages/player/[username].tsx
@@ -1,14 +1,10 @@
-import {
-  Avatar,
-  Box,
-  Flex,
-  MetaBox,
-  MetaTag,
-  SimpleGrid,
-  Text,
-} from '@metafam/ds';
+import { MetaBox, SimpleGrid, Text } from '@metafam/ds';
 import { MaxWidthContainer } from 'components/Container';
 import { PageHeader } from 'components/PageHeader';
+import { PlayerFeatures } from 'components/Player/PlayerFeatures';
+import { PlayerHero } from 'components/Player/PlayerHero';
+import { getPlayer } from 'graphql/getPlayer';
+import { getPlayers } from 'graphql/getPlayers';
 import {
   GetStaticPaths,
   GetStaticPropsContext,
@@ -17,11 +13,6 @@ import {
 import Error from 'next/error';
 import React from 'react';
 
-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>;
 
 const PlayerPage: React.FC<Props> = ({ player }) => {
@@ -32,39 +23,8 @@ const PlayerPage: React.FC<Props> = ({ player }) => {
   return (
     <>
       <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>
+      <PlayerHero player={player} />
+      <PlayerFeatures player={player} />
       <MaxWidthContainer>
         <SimpleGrid columns={[1, 1, 2, 3]} spacing="2rem" pt="3rem">
           <MetaBox title="About me">