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

set up modal dialog in profile sections

Browse Source
This commit is contained in:
vidvidvid
2021-10-09 16:37:04 +02:00
committed by Alec LaLonde
parent 045a91267b
commit f36188247c
3 changed files with 87 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/design-system/src/index.ts
View File

@@ -93,8 +93,11 @@ export {
MenuItem,
MenuList,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Select,
SimpleGrid,

8
packages/web/components/MegaMenu.tsx
View File

@@ -367,6 +367,14 @@ const PlayerStats: React.FC<PlayerStatsProps> = ({ player }) => {
<MenuItem>View Profile</MenuItem>
</MetaLink>
<MenuItem onClick={disconnect}>Disconnect</MenuItem>
<MetaLink
color="black"
href="/profile/setup/username"
_hover={{ textDecoration: 'none' }}
>
<MenuItem>Edit Profile</MenuItem>
</MetaLink>
</MenuList>
</Menu>
</Flex>

117
packages/web/components/ProfileSection.tsx
View File

@@ -1,4 +1,19 @@
import { Box, EditIcon, HStack, IconButton, Text } from '@metafam/ds';
import {
Box,
Button,
EditIcon,
HStack,
IconButton,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Text,
useDisclosure,
} from '@metafam/ds';
import React from 'react';
import { FaTimes } from 'react-icons/fa';
@@ -17,45 +32,65 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
onRemoveClick,
canEdit,
displayEditButton,
}) => (
<Box minW="72">
{title ? (
<Box bg="purpleProfileSection" borderTopRadius="lg" pt={5} pb={5}>
<HStack height={5} pr={4} pl={8}>
<Text fontSize="md" color="blueLight" as="div" mr="auto">
{title.toUpperCase()}
</Text>
{displayEditButton ? (
<IconButton
aria-label="Edit Profile Info"
size="lg"
background="transparent"
color="#A426A4"
icon={<EditIcon />}
_hover={{ color: 'white' }}
isRound
/>
) : null}
{canEdit ? (
<FaTimes
color="blueLight"
opacity="0.4"
cursor="pointer"
onClick={onRemoveClick}
/>
) : null}
</HStack>
}) => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<Box minW="72">
{title ? (
<Box bg="purpleProfileSection" borderTopRadius="lg" pt={5} pb={5}>
<HStack height={5} pr={4} pl={8}>
<Text fontSize="md" color="blueLight" as="div" mr="auto">
{title.toUpperCase()}
</Text>
{displayEditButton ? (
<IconButton
aria-label="Edit Profile Info"
size="lg"
background="transparent"
color="#A426A4"
icon={<EditIcon />}
_hover={{ color: 'white' }}
onClick={onOpen}
isRound
/>
) : null}
{canEdit ? (
<FaTimes
color="blueLight"
opacity="0.4"
cursor="pointer"
onClick={onRemoveClick}
/>
) : null}
</HStack>
</Box>
) : null}
<Box
bg="blueProfileSection"
borderBottomRadius="lg"
borderTopRadius={!title ? 'lg' : 0}
p={8}
boxShadow="md"
css={{ backdropFilter: 'blur(8px)' }}
>
{children}
</Box>
) : null}
<Box
bg="blueProfileSection"
borderBottomRadius="lg"
borderTopRadius={!title ? 'lg' : 0}
p={8}
boxShadow="md"
css={{ backdropFilter: 'blur(8px)' }}
>
{children}
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>LOL</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</Box>
</Box>
);
);
};