Added modal to view profile details

- View profile picture if available
- View details if available

src/components/Modal/Profile/ProfileModal.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { auth, firestore } from "@/firebase/clientApp";
+import { useAuthState } from "react-firebase-hooks/auth";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Box,
+  Text,
+  Flex,
+  Image,
+  Icon,
+  Stack,
+} from "@chakra-ui/react";
+import { MdAccountCircle } from "react-icons/md";
+import { User } from "@firebase/auth";
+
+type ProfileModalProps = {
+  open: boolean;
+  handleClose: () => void;
+};
+
+const ProfileModal: React.FC<ProfileModalProps> = ({ open, handleClose }) => {
+  const [user] = useAuthState(auth);
+
+  return (
+    <>
+      <Modal isOpen={open} onClose={handleClose}>
+        <ModalOverlay />
+        <ModalContent borderRadius={10}>
+          <ModalHeader
+            display="flex"
+            flexDirection="column"
+            padding={3}
+            textAlign="center"
+          >
+            Profile
+          </ModalHeader>
+          <Box>
+            <ModalCloseButton />
+            <ModalBody display="flex" flexDirection="column" padding="10px 0px">
+              <Stack p={5} spacing={5}>
+                <ProfileModalPicture user={user} />
+                <ProfileModalUserDetails user={user} />
+              </Stack>
+            </ModalBody>
+          </Box>
+
+          <ModalFooter bg="gray.100" borderRadius="0px 0px 10px 10px">
+            <Button
+              variant="outline"
+              height="30px"
+              mr={3}
+              onClick={handleClose}
+            >
+              B1
+            </Button>
+            <Button height="30px">B2</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+export default ProfileModal;
+
+type ProfileModalPictureProps = {
+  user: User | null | undefined;
+};
+
+const ProfileModalPicture: React.FC<ProfileModalPictureProps> = ({ user }) => {
+  return (
+    <Flex align="center" justify="center" p={2}>
+      {user?.photoURL ? (
+        <Image
+          src={user.photoURL}
+          alt="User Profile Photo"
+          height="120px"
+          borderRadius="full"
+          shadow="md"
+        />
+      ) : (
+        <Icon fontSize={120} mr={1} color="gray.300" as={MdAccountCircle} />
+      )}
+    </Flex>
+  );
+};
+
+interface ProfileModalUserDetailsProps {
+  user: User | null | undefined;
+}
+
+const ProfileModalUserDetails: React.FC<ProfileModalUserDetailsProps> = ({
+  user,
+}) => {
+  return (
+    <Flex direction="column">
+      <Stack direction="row">
+        <Text fontWeight={700}>Display Name:</Text>
+        <Text>{user?.displayName ? user.displayName : "No Name"}</Text>
+      </Stack>
+      <Stack direction="row">
+        <Text fontWeight={700}>Email:</Text>
+        <Text>{user?.email}</Text>
+      </Stack>
+    </Flex>
+  );
+};

src/components/Navbar/RightContent/UserMenu.tsx

@@ -1,5 +1,6 @@
 import { authModalState } from "@/atoms/authModalAtom";
 import CustomMenuButton from "@/components/atoms/CustomMenuButton";
+import ProfileModal from "@/components/Modal/Profile/ProfileModal";
 import { auth } from "@/firebase/clientApp";
 import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons";
 import {
@@ -50,6 +51,7 @@ type UserMenuProps = {
  */
 const UserMenu: React.FC<UserMenuProps> = ({ user }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isProfileModalOpen, setProfileModalOpen] = useState(false);
 
   /**
    * Toggles the menu open and closed.
@@ -63,10 +65,17 @@ const UserMenu: React.FC<UserMenuProps> = ({ user }) => {
   };
 
   return (
-    <Menu isOpen={isMenuOpen} onOpen={toggle} onClose={toggle}>
-      <UserMenuButton user={user} isMenuOpen={isMenuOpen} />
-      <UserMenuList user={user} />
-    </Menu>
+    <>
+      <ProfileModal
+        open={isProfileModalOpen}
+        handleClose={() => setProfileModalOpen(false)}
+      />
+
+      <Menu isOpen={isMenuOpen} onOpen={toggle} onClose={toggle}>
+        <UserMenuButton user={user} isMenuOpen={isMenuOpen} />
+        <UserMenuList user={user} setProfileModalOpen={setProfileModalOpen} />
+      </Menu>
+    </>
   );
 };
 export default UserMenu;
@@ -122,6 +131,7 @@ const UserMenuButton: React.FC<UserMenuButtonProps> = ({
                 src={user.photoURL}
                 alt="User Profile Photo"
                 height="30px"
+                borderRadius="full"
                 mr={1}
               />
             </>
@@ -162,6 +172,8 @@ const UserMenuButton: React.FC<UserMenuButtonProps> = ({
  */
 interface UserMenuListProps {
   user: User | null | undefined;
+  setProfileModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  //todo pass open profile modal function
 }
 
 /**
@@ -177,7 +189,10 @@ interface UserMenuListProps {
  *
  * @requires CustomMenuButton
  */
-const UserMenuList: React.FC<UserMenuListProps> = ({ user }) => {
+const UserMenuList: React.FC<UserMenuListProps> = ({
+  user,
+  setProfileModalOpen,
+}) => {
   const setAuthModalState = useSetRecoilState(authModalState);
 
   /**
@@ -199,7 +214,7 @@ const UserMenuList: React.FC<UserMenuListProps> = ({ user }) => {
               <CustomMenuButton
                 icon={<CgProfile />}
                 text="Profile"
-                onClick={() => console.log("Profile clicked")}
+                onClick={() => setProfileModalOpen(true)}
               />
 
               <CustomMenuButton