Implement list of Guilds in frontend

packages/web/components/Player/Section/PlayerAchievements.tsx

@@ -2,7 +2,7 @@ import { HStack, Text } from '@metafam/ds';
 import React from 'react';
 import { FaMedal } from 'react-icons/fa';
 
-import { PlayerSection } from './PlayerSection';
+import { ProfileSection } from '../../ProfileSection';
 
 // TODO Fake data
 type Props = { onRemoveClick: () => void };
@@ -15,7 +15,7 @@ export const PlayerAchievements: React.FC<Props> = ({ onRemoveClick }) => {
   ];
 
   return (
-    <PlayerSection title="Achievements" onRemoveClick={onRemoveClick}>
+    <ProfileSection title="Achievements" onRemoveClick={onRemoveClick}>
       {(fakeData || []).slice(0, show ? 999 : 3).map((title) => (
         <HStack alignItems="baseline" mb={3}>
           <FaMedal color="#FBB112" />
@@ -34,6 +34,6 @@ export const PlayerAchievements: React.FC<Props> = ({ onRemoveClick }) => {
           View {show ? 'less' : 'all'}
         </Text>
       )}
-    </PlayerSection>
+    </ProfileSection>
   );
 };

packages/web/components/Player/Section/PlayerCollab.tsx

@@ -9,7 +9,7 @@ export const PlayerCollab: React.FC<Props> = ({ player }) => {
     <HStack
       spacing={6}
       divider={
-        <Divider height="3rem" color="purpleTag" orientation="vertical" />
+        <Divider height="3rem" color="whiteAlpha.400" orientation="vertical" />
       }
     >
       <Box>

packages/web/components/Player/Section/PlayerGallery.tsx

@@ -19,7 +19,7 @@ import {
 import React from 'react';
 import { FaTimes } from 'react-icons/fa';
 
-import { PlayerSection } from './PlayerSection';
+import { ProfileSection } from '../../ProfileSection';
 
 type Props = { player: PlayerFragmentFragment; onRemoveClick: () => void };
 
@@ -67,7 +67,7 @@ export const PlayerGallery: React.FC<Props> = ({ player, onRemoveClick }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { favorites, data, loading } = useOpenSeaCollectibles({ player });
   return (
-    <PlayerSection title="NFT Gallery" onRemoveClick={onRemoveClick}>
+    <ProfileSection title="NFT Gallery" onRemoveClick={onRemoveClick}>
       {!loading &&
         favorites?.map((nft) => <GalleryItem nft={nft} key={nft.tokenId} />)}
       {!loading && data?.length > 3 && (
@@ -133,6 +133,6 @@ export const PlayerGallery: React.FC<Props> = ({ player, onRemoveClick }) => {
           </ModalContent>
         </ModalOverlay>
       </Modal>
-    </PlayerSection>
+    </ProfileSection>
   );
 };

packages/web/components/Player/Section/PlayerHero.tsx

@@ -9,20 +9,20 @@ import {
 
 import { PersonalityTypes } from '../../../graphql/types';
 import { FlexContainer } from '../../Container';
+import { ProfileSection } from '../../ProfileSection';
 import { PlayerContacts } from '../PlayerContacts';
 import { PlayerCollab } from './PlayerCollab';
-import { PlayerSection } from './PlayerSection';
 
 const BIO_LENGTH = 240;
 
 type Props = { player: PlayerFragmentFragment };
 export const PlayerHero: React.FC<Props> = ({ player }) => {
   const [show, setShow] = React.useState(
-    getPlayerDescription(player).length < 115,
+    getPlayerDescription(player).length < BIO_LENGTH,
   );
 
   return (
-    <PlayerSection>
+    <ProfileSection>
       <VStack spacing={8}>
         <Avatar
           w={{ base: '32', md: '56' }}
@@ -34,12 +34,7 @@ export const PlayerHero: React.FC<Props> = ({ player }) => {
           <Text fontSize="xl" fontFamily="heading" mb="1">
             {getPlayerName(player)}
           </Text>
-
-          <HStack mt="2">
-            <PlayerContacts player={player} />
-          </HStack>
         </Box>
-
         <Box>
           <Text>
             {`${getPlayerDescription(player).substring(
@@ -60,6 +55,10 @@ export const PlayerHero: React.FC<Props> = ({ player }) => {
             )}
           </Text>
         </Box>
+
+        <HStack mt="2">
+          <PlayerContacts player={player} />
+        </HStack>
         <Box w="100%">
           <PlayerCollab player={player} />
         </Box>
@@ -89,6 +88,6 @@ export const PlayerHero: React.FC<Props> = ({ player }) => {
           </FlexContainer>
         ) : null}
       </VStack>
-    </PlayerSection>
+    </ProfileSection>
   );
 };

packages/web/components/Player/Section/PlayerMemberships.tsx

@@ -8,7 +8,7 @@ import metacartelImage from '../../../assets/moloch/metacartel.png';
 import metaclanImage from '../../../assets/moloch/metaclan.png';
 import metagameImage from '../../../assets/moloch/metagame.png';
 import raidGuildImage from '../../../assets/moloch/raid_guild.png';
-import { PlayerSection } from './PlayerSection';
+import { ProfileSection } from '../../ProfileSection';
 
 type Props = { player: PlayerFragmentFragment; onRemoveClick: () => void };
 export const PlayerMemberships: React.FC<Props> = ({
@@ -27,7 +27,7 @@ export const PlayerMemberships: React.FC<Props> = ({
   };
 
   return (
-    <PlayerSection title="Memberships" onRemoveClick={onRemoveClick}>
+    <ProfileSection title="Memberships" onRemoveClick={onRemoveClick}>
       <HStack alignItems="center" mb={6}>
         <Flex bg="purpleBoxLight" width={16} height={16} mr={6}>
           <Box
@@ -94,6 +94,6 @@ export const PlayerMemberships: React.FC<Props> = ({
           View {show ? 'less' : 'all'}
         </Text>
       )}
-    </PlayerSection>
+    </ProfileSection>
   );
 };

packages/web/components/Player/Section/PlayerSection.tsx

@@ -1,55 +0,0 @@
-import { Box, HStack, Text } from '@metafam/ds';
-import React from 'react';
-import { FaTimes } from 'react-icons/fa';
-
-export type PlayerSectionProps = {
-  title?: string;
-  children?: React.ReactNode;
-  onRemoveClick?: () => void;
-  canEdit?: boolean;
-};
-
-// TODO If MetaBox is only used for Player profile maybe merge both component
-export const PlayerSection: React.FC<PlayerSectionProps> = ({
-  children,
-  title,
-  onRemoveClick,
-  canEdit,
-}) => (
-  <Box minW="xs">
-    {title ? (
-      <Box bg="purple80" borderTopRadius="lg" p={4}>
-        <HStack>
-          <Text
-            fontFamily="mono"
-            fontSize="sm"
-            fontWeight="bold"
-            color="blueLight"
-            as="div"
-            mr="auto"
-          >
-            {title}
-          </Text>
-          {canEdit ? (
-            <FaTimes
-              color="blueLight"
-              opacity="0.4"
-              cursor="pointer"
-              onClick={onRemoveClick}
-            />
-          ) : null}
-        </HStack>
-      </Box>
-    ) : null}
-    <Box
-      bg="whiteAlpha.200"
-      borderBottomRadius="lg"
-      borderTopRadius={!title ? 'lg' : 0}
-      p={6}
-      boxShadow="md"
-      css={{ backdropFilter: 'blur(8px)' }}
-    >
-      {children}
-    </Box>
-  </Box>
-);

packages/web/components/Player/Section/PlayerSkills.tsx

@@ -3,7 +3,7 @@ import { PlayerFragmentFragment } from 'graphql/autogen/types';
 import { SkillColors } from 'graphql/types';
 import React from 'react';
 
-import { PlayerSection } from './PlayerSection';
+import { ProfileSection } from '../../ProfileSection';
 
 type Props = { player: PlayerFragmentFragment; onRemoveClick: () => void };
 export const PlayerSkills: React.FC<Props> = ({ player, onRemoveClick }) => {
@@ -11,7 +11,7 @@ export const PlayerSkills: React.FC<Props> = ({ player, onRemoveClick }) => {
     return null;
   }
   return (
-    <PlayerSection title="Skills" onRemoveClick={onRemoveClick}>
+    <ProfileSection title="Skills" onRemoveClick={onRemoveClick}>
       <Wrap>
         {(player.Player_Skills || []).map(({ Skill }) => (
           <MetaTag
@@ -28,6 +28,6 @@ export const PlayerSkills: React.FC<Props> = ({ player, onRemoveClick }) => {
           </MetaTag>
         ))}
       </Wrap>
-    </PlayerSection>
+    </ProfileSection>
   );
 };