Merge pull request #37 from Dolcinella/main

Add dialog window/Make changes to the About page
langaracpsc · Apr 2, 2024 · 917de90 · 917de90
2 parents 9323993 + 483dd78
commit 917de90
Show file tree

Hide file tree

Showing 5 changed files with 232 additions and 94 deletions.
diff --git a/frontend/src/app/ExecProfile.tsx b/frontend/src/app/ExecProfile.tsx
@@ -2,6 +2,9 @@ import {Component} from "react";
 import Image from "next/image";
 import {useState, useEffect} from "react";
 import { init } from "next/dist/compiled/@vercel/og/satori";
+import ProfileModal from "./ProfileModal";
+import * as Dialog from "@radix-ui/react-dialog";
+
 
 interface ExecProfileProps
 {
@@ -67,13 +70,34 @@ export default function ExecProfile({ID, Name, ImageBuffer, Position, Descriptio
                 window.removeEventListener('resize', handleResize);
         };
     }, []);
+
+
 
     return (
-            <div className="flex flex-col items-center gap-3">
-                <Image src={ImageBuffer} width={imageWidth} height={imageWidth} alt={Name} style={{borderRadius: "100%", height: imageWidth, width: imageWidth }} className={`w-[${imageWidth}px] h-[${imageWidth}px] aspect-square rounded-2xl`}/>
-                <span className="flex flex-col font-bold text-center">{Name.split(' ').map(name => <div key={name}>{name}</div>)}</span> {/* Adjust margin-top as needed to position below image center */}
-            </div>);
+        <div className="flex flex-col items-center gap-3">
+            <Image src={ImageBuffer} width={imageWidth} height={imageWidth} alt={Name} style={{borderRadius: "100%", height: imageWidth, width: imageWidth }} className={`w-[${imageWidth}px] h-[${imageWidth}px] aspect-square rounded-2xl`}/>
+            <div className="flex flex-col items-center text-center">
+                <div className="flex" style={{ justifyContent: "center"}}>
+                    <div>
+                            <Dialog.Root>
+                                <Dialog.Trigger className='font-bold'>{Name}</Dialog.Trigger>
+                                <Dialog.Portal>
+                                    <Dialog.Overlay className="fixed inset-0 bg-black/60">
+                                    <Dialog.Content className="fixed top-1/4 left-1/2 -translate-x-1/2 p-8" style={{border: "2px solid #F15A22", backgroundColor: "#171717"}}>
+                                        <ProfileModal 
+                                        Name={Name}
+                                        Position={Position}
+                                        ImageBuffer={ImageBuffer}
+                                        Description={Description}
+                                        imageWidth={imageWidth}/>
+                                    </Dialog.Content>
+                                    </Dialog.Overlay>
+                                </Dialog.Portal>
+                            </Dialog.Root>
+                        <p>{Position}</p>
+                    </div>
+                </div>
+            </div>
+        </div>);
 }
-
-
 
diff --git a/frontend/src/app/ProfileModal.tsx b/frontend/src/app/ProfileModal.tsx
@@ -0,0 +1,53 @@
+import { defaultHead } from 'next/head';
+import React, { useState, useEffect } from 'react';
+import Image from "next/image";
+import * as Dialog from "@radix-ui/react-dialog";
+
+interface ProfileModalProps {
+    ID: String;
+
+    Name: string;
+
+    Position: string;
+
+    Description: string;
+
+    ImageBuffer: string;
+
+    imageWidth: number;
+}
+
+export default function ProfileModal ({Name, Position, ImageBuffer, Description, imageWidth} : ProfileModalProps) {
+    const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsSmallScreen(window.innerWidth < 1200);
+        };
+
+        handleResize();
+
+        window.addEventListener('resize', handleResize);
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return (
+                <div className="content flex" style={{ flexDirection: isSmallScreen ? "column" : "row", padding: '20px', overflowY: 'auto', boxSizing: 'border-box', maxWidth: "60vw", maxHeight: "60vh"}}>
+                <div className="flex flex-col items-center gap-3">
+                    <Image src={ImageBuffer} width={imageWidth} height={imageWidth} alt={Name} style={{borderRadius: "100%", minHeight: "20vb", minWidth: "20vb"}} className={`w-[${imageWidth}px] h-[${imageWidth}px] aspect-square rounded-2xl`}/>
+                    <div className='profile-info flex text-center' style={{flexDirection: "column"}}>
+
+                        <h2 className='font-bold'>{Name}</h2>
+                        <p>{Position}</p>
+
+                    </div>
+                </div> 
+                <div className='description-section flex text-left' style={{flexDirection: "column", marginLeft: isSmallScreen ? "0px" : "40px", marginTop: isSmallScreen ? "20px" : "0px"}}>
+                    <h3 className='font-bold'>Description</h3>
+                    <p>{Description}</p>
+                </div>
+                <Dialog.Close className='close-modal' style={{ position: 'absolute', top: 10, right: 10, padding: '5px 7px', borderRadius: '4px' }}>Close</Dialog.Close>
+            </div>
+    );
+};