mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-02-08 21:15:05 -05:00
7492ae5bd6
* Remove unused pages / components * Add WrapItem around components inside Wrap component New version of Chakra requires WrapItem around any components that have Wrap * Update LoginButton to link to own profile and show Avatar (#285) * Update LoginButton to link to own profile and show Avatar * Change SetupUsername to explicitly mention "username"
81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import {
|
|
Avatar,
|
|
Box,
|
|
Flex,
|
|
Heading,
|
|
HStack,
|
|
MetaButton,
|
|
MetaTag,
|
|
Text,
|
|
VStack,
|
|
} from '@metafam/ds';
|
|
import { GuildLinks } from 'components/Guild/GuildLinks';
|
|
import { GuildFragmentFragment } from 'graphql/autogen/types';
|
|
import React from 'react';
|
|
|
|
type Props = {
|
|
guild: GuildFragmentFragment;
|
|
};
|
|
|
|
export const GuildTile: React.FC<Props> = ({ guild }) => (
|
|
<Flex
|
|
direction="column"
|
|
key={guild.id}
|
|
bg="whiteAlpha.200"
|
|
style={{ backdropFilter: 'blur(7px)' }}
|
|
rounded="lg"
|
|
p="6"
|
|
maxW="30rem"
|
|
w="100%"
|
|
align="stretch"
|
|
position="relative"
|
|
overflow="hidden"
|
|
justify="space-between"
|
|
>
|
|
<VStack w="100%" spacing="6" align="stretch" mb={6} position="relative">
|
|
<VStack>
|
|
{guild.logo ? (
|
|
<Avatar size="xl" src={guild.logo} name={guild.name} />
|
|
) : null}
|
|
|
|
<Heading size="sm" color="white">
|
|
{guild.name}
|
|
</Heading>
|
|
</VStack>
|
|
{guild.type ? (
|
|
<Box align="center">
|
|
<MetaTag size="md">{guild.type} GUILD</MetaTag>
|
|
</Box>
|
|
) : null}
|
|
{guild.description ? (
|
|
<VStack spacing={2} align="stretch">
|
|
<Text fontFamily="mono" fontSize="sm" color="blueLight">
|
|
ABOUT
|
|
</Text>
|
|
<Text fontSize="sm">{guild.description}</Text>
|
|
</VStack>
|
|
) : null}
|
|
</VStack>
|
|
<VStack w="100%" spacing="6" align="stretch">
|
|
<VStack spacing={2} align="stretch">
|
|
<Text fontFamily="mono" fontSize="sm" color="blueLight">
|
|
LINKS
|
|
</Text>
|
|
<HStack mt="2">
|
|
<GuildLinks guild={guild} />
|
|
</HStack>
|
|
</VStack>
|
|
{guild.join_button_url ? (
|
|
<MetaButton
|
|
as="a"
|
|
href={guild.join_button_url}
|
|
target="_blank"
|
|
fontFamily="mono"
|
|
>
|
|
Join
|
|
</MetaButton>
|
|
) : null}
|
|
</VStack>
|
|
</Flex>
|
|
);
|