github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Consolidate contact UI with PlayerTile and Player page

Browse Source
This commit is contained in:
Hammad Jutt
2020-12-19 21:32:37 -07:00
parent cd14649f74
commit 50bb17efa7
7 changed files with 55 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/web/components/Player/Section/PlayerContactButtons.tsx
View File

@@ -1,65 +0,0 @@
import { Button, HStack } from '@metafam/ds';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import React from 'react';
import { FaGithub, FaTwitter } from 'react-icons/fa';
import { PlayerSection } from './PlayerSection';
// TODO Maybe add more social platform
type Props = { player: PlayerFragmentFragment; onRemoveClick: () => void };
export const PlayerContactButtons: React.FC<Props> = ({
player,
onRemoveClick,
}) => {
return (
<PlayerSection title="Contact" onRemoveClick={onRemoveClick}>
<HStack>
{player.Accounts.map((acc) => {
if (acc.type === 'TWITTER') {
const link = `https://twitter.com/${acc.identifier}`;
return (
<Button
as="a"
href={link}
target="_blank"
key={link}
size="xs"
colorScheme="twitter"
backgroundColor="platinum"
borderRadius="50%"
h={12}
w={12}
ml={0}
mr={8}
>
<FaTwitter size={24} color="#392373" />
</Button>
);
}
if (acc.type === 'GITHUB') {
const link = `https://github.com/${acc.identifier}`;
return (
<Button
as="a"
href={link}
target="_blank"
key={link}
size="xs"
colorScheme="blackAlpha"
backgroundColor="platinum"
borderRadius="50%"
h={12}
w={12}
ml={0}
mr={8}
>
<FaGithub size={24} color="#392373" />
</Button>
);
}
return null;
})}
</HStack>
</PlayerSection>
);
};

58
packages/web/components/Player/Section/PlayerHero.tsx
View File

@@ -1,4 +1,4 @@
import { Avatar, Box, HStack, Image, MetaTag, Text, VStack } from '@metafam/ds';
import { Avatar, Box, HStack, Image, Text, VStack } from '@metafam/ds';
import { PlayerFragmentFragment } from 'graphql/autogen/types';
import React from 'react';
import {
@@ -9,6 +9,7 @@ import {
import { PersonalityTypes } from '../../../graphql/types';
import { FlexContainer } from '../../Container';
import { PlayerContacts } from '../PlayerContacts';
import { PlayerCollab } from './PlayerCollab';
import { PlayerSection } from './PlayerSection';
@@ -33,11 +34,10 @@ export const PlayerHero: React.FC<Props> = ({ player }) => {
<Text fontSize="xl" fontFamily="heading" mb="1">
{getPlayerName(player)}
</Text>
{player.playerType?.title ? (
<MetaTag size="md">
{player.playerType?.title.toUpperCase()}
</MetaTag>
) : null}
<HStack mt="2">
<PlayerContacts player={player} />
</HStack>
</Box>
<Box>
@@ -63,27 +63,31 @@ export const PlayerHero: React.FC<Props> = ({ player }) => {
<Box w="100%">
<PlayerCollab player={player} />
</Box>
<Box>
{player.EnneagramType && (
<HStack spacing={4}>
<Image
w="100%"
maxW="4rem"
src={PersonalityTypes[player.EnneagramType.name].image}
alt={player.EnneagramType.name}
style={{ mixBlendMode: 'color-dodge' }}
/>
<FlexContainer align="stretch">
<Text color="white" fontWeight="bold">
{player.EnneagramType.name}
</Text>
<Text color="blueLight">
{player.EnneagramType.description}
</Text>
</FlexContainer>
</HStack>
)}
</Box>
{player.EnneagramType && (
<HStack spacing={4}>
<Image
w="100%"
maxW="4rem"
src={PersonalityTypes[player.EnneagramType.name].image}
alt={player.EnneagramType.name}
style={{ mixBlendMode: 'color-dodge' }}
/>
<FlexContainer align="stretch">
<Text color="white" fontWeight="bold">
{player.EnneagramType.name}
</Text>
<Text color="blueLight">{player.EnneagramType.description}</Text>
</FlexContainer>
</HStack>
)}
{player.playerType?.title ? (
<FlexContainer align="stretch">
<Text color="white" fontWeight="bold">
{player.playerType.title.toUpperCase()}
</Text>
<Text color="blueLight">{player.playerType.description}</Text>
</FlexContainer>
) : null}
</VStack>
</PlayerSection>
);