add skills

packages/web/pages/profile/[username]/Section/Skills.tsx

@@ -0,0 +1,32 @@
+import { MetaTag, Wrap, WrapItem } from '@metafam/ds';
+import { PlayerFragmentFragment } from 'graphql/autogen/types';
+import { SkillColors } from 'graphql/types';
+import React from 'react';
+
+import { ProfileSection } from '../../../../components/ProfileSection';
+
+type Props = { player: PlayerFragmentFragment };
+const PlayerSkills: React.FC<Props> = ({ player }) => {
+  if (!player.skills?.length) {
+    return null;
+  }
+  return (
+    <ProfileSection title="Skills">
+      <Wrap>
+        {(player.skills || []).map(({ Skill }) => (
+          <WrapItem key={Skill.id}>
+            <MetaTag
+              size="md"
+              fontWeight="normal"
+              backgroundColor={SkillColors[Skill.category]}
+            >
+              {Skill.name}
+            </MetaTag>
+          </WrapItem>
+        ))}
+      </Wrap>
+    </ProfileSection>
+  );
+};
+
+export default PlayerSkills;

packages/web/pages/profile/[username]/edit.tsx

@@ -7,6 +7,8 @@ import {
 } from 'next';
 import React from 'react';
 
+import PlayerSkills from './Section/Skills';
+
 type QueryParams = { username: string };
 
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
@@ -53,6 +55,7 @@ export const getStaticProps = async (
 
 const EditPage: React.FC<Props> = ({ player }) => {
   console.log('player', player);
+
   return (
     <PageContainer>
       Main info:
@@ -76,9 +79,8 @@ const EditPage: React.FC<Props> = ({ player }) => {
       <br /> title: {player.color_aspect.name}
       <br /> description: {player.color_aspect.description} <br />
       <br /> Top 3 skills:
-      <br /> skill: {player.skills[0].Skill.name}
-      <br /> skill: {player.skills[1].Skill.name}
-      <br /> skill: {player.skills[2].Skill.name} <br />
+      <PlayerSkills player={player} />
+      <br />
     </PageContainer>
   );
 };