github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-01-14 17:08:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

style: copy design of player profile to guild profile

Browse Source
This commit is contained in:
vidvidvid
2021-12-05 18:50:05 +01:00
committed by Alec LaLonde
parent 4a8a6f1d2c
commit 7f7f1889a3
1 changed files with 112 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
packages/web/pages/guild/[guildname].tsx
View File

@@ -11,6 +11,8 @@ import {
import Error from 'next/error';
import { useRouter } from 'next/router';
import React from 'react';
import { BOX_TYPE } from 'utils/boxTypes';
import { getPlayerCoverImageFull } from 'utils/playerHelpers';
import { PageContainer } from '../../components/Container';
import { GuildHero } from '../../components/Guild/GuildHero';
@@ -20,9 +22,20 @@ import { HeadComponent } from '../../components/Seo';
type Props = InferGetStaticPropsType<typeof getStaticProps>;
const GuildPage: React.FC<Props> = ({ guild, quests }) => {
const GuildPage: React.FC<Props> = ({ guild }) => {
const router = useRouter();
// Hidden until implemented
// BOX_TYPE.GUILD.SKILLS,
// BOX_TYPE.GUILD.STATS,
// BOX_TYPE.GUILD.QUESTS,
// BOX_TYPE.GUILD.GALLERY,
const boxes = [
[BOX_TYPE.GUILD.PLAYERS],
[BOX_TYPE.GUILD.ANNOUNCEMENTS, BOX_TYPE.GUILD.LINKS],
];
if (router.isFallback) {
return <LoadingState />;
}
@@ -31,72 +44,112 @@ const GuildPage: React.FC<Props> = ({ guild, quests }) => {
return <Error statusCode={404} />;
}
const getBox = (name: string): React.ReactNode => {
switch (name) {
case BOX_TYPE.GUILD.PLAYERS:
return <GuildPlayers guildId={guild.id} guildname={guild.guildname} />;
case BOX_TYPE.GUILD.LINKS:
return <GuildLinks guild={guild} />;
case BOX_TYPE.GUILD.ANNOUNCEMENTS:
return (
<ProfileSection title="Announcements">
<p>No announcements.</p>
</ProfileSection>
);
default:
return <></>;
}
};
return (
<PageContainer>
<HeadComponent
title={guild.name}
description={`${guild.description}`}
url={`https://my.metagame.wtf/guild/${guild.guildname}`}
img={`${guild.logo}`}
<PageContainer p={0}>
<Box
background={`url(${getPlayerCoverImageFull({})}) no-repeat`}
bgSize="cover"
bgPos="center"
h={72}
position="absolute"
w="full"
/>
<Flex
w="full"
minH="100vh"
pl={[4, 8, 12]}
pr={[4, 8, 12]}
pb={[4, 8, 12]}
pt={200 - 72}
direction="column"
align="center"
direction={{ base: 'column', lg: 'row' }}
alignItems="flex-start"
maxWidth="7xl"
zIndex={1}
>
<Box width={{ base: '100%', lg: '33%' }} mr={{ base: 0, lg: 4 }}>
<Box mb="6">
<GuildHero guild={guild} />
<HeadComponent
title={guild.name}
description={`${guild.description}`}
url={`https://my.metagame.wtf/guild/${guild.guildname}`}
img={`${guild.logo}`}
/>
<Flex
align="center"
direction={{ base: 'column', md: 'row' }}
alignItems="flex-start"
maxWidth="7xl"
>
<Box
width={{ base: '100%', md: '50%', lg: '33%' }}
mr={{ base: 0, md: 4 }}
>
<Box mb="6">
<GuildHero guild={guild} />
</Box>
</Box>
<Box mb="6">
<ProfileSection title="Skills" />
<Box
width={{ base: '100%', md: '50%', lg: '66%' }}
ml={{ base: 0, md: 4 }}
mt={[0, 0, 100]}
mb={[100, 100, 0]}
>
<Box width="100%">
<Flex
align="center"
direction={{ base: 'column', lg: 'row' }}
alignItems="flex-start"
>
<Box
width={{ base: '100%', lg: '50%' }}
mr={{ base: 0, lg: 4 }}
>
{boxes[0].map((name) => (
<Box mb="6" key={name}>
{getBox(name)}
</Box>
))}
</Box>
<Box
width={{ base: '100%', lg: '50%' }}
ml={{ base: 0, lg: 4 }}
>
{boxes[1].map((name) => (
<Box mb="6" key={name}>
{getBox(name)}
</Box>
))}
</Box>
</Flex>
</Box>
</Box>
<Box mb="6">
<GuildLinks guild={guild} />
</Box>
</Box>
<Box width={{ base: '100%', lg: '66%' }} ml={{ base: 0, lg: 4 }}>
<Box width="100%">
<Flex
align="center"
direction={{ base: 'column', lg: 'row' }}
alignItems="flex-start"
>
<Box width={{ base: '100%', lg: '50%' }} mr={{ base: 0, lg: 4 }}>
<Box mb="6">
<GuildPlayers
guildId={guild.id}
guildname={guild.guildname}
/>
</Box>
<Box mb="6">
<ProfileSection title="Stats" />
</Box>
</Box>
<Box width={{ base: '100%', lg: '50%' }} ml={{ base: 0, lg: 4 }}>
<Box mb="6">
<ProfileSection title="Announcements">
<p>No announcements.</p>
</ProfileSection>
</Box>
<Box mb="6">
<ProfileSection title="Quests">
{quests?.length ? (
<p>Available quests</p>
) : (
<p>Currently no available quests</p>
)}
</ProfileSection>
</Box>
<Box mb="6">
<ProfileSection title="Gallery" />
</Box>
</Box>
</Flex>
</Box>
</Box>
</Flex>
</Flex>
{/* to be implemented */}
{/* <ProfileSection title="Skills" />
<ProfileSection title="Stats" />
<ProfileSection title="Quests">
{quests?.length ? (
<p>Available quests</p>
) : (
<p>Currently no available quests</p>
)}
</ProfileSection>
<ProfileSection title="Gallery" /> */}
</PageContainer>
);
};