Skip to content

Commit

Permalink
some changes to exec page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Highfire1
Highfire1 committed Dec 3, 2024
1 parent 17485c1 commit 776b094
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 91 deletions.
84 changes: 50 additions & 34 deletions frontend/src/app/about/ExecProfile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,70 @@
import * as Dialog from "@radix-ui/react-dialog";
import { SocialIcon } from "react-social-icons";
import Image from "next/image";


import ProfileModal from "./ProfileModal";
import { Executive } from "./ExecProfiles";


export default function ExecProfile(exec: Executive) {


interface ExecProfileProps
{
ID: string;

Name: string;

ImageBuffer: string;

Position: Array<string>;

Description: string;
}

export default function ExecProfile({ID, Name, ImageBuffer, Position, Description} : ExecProfileProps)
{


/*
Anderson's thoughts:
This entire component is black magic.
*/
return (
<div className="flex flex-col items-center gap-3 max-w-[200px]">
<div className="flex flex-col items-center text-center">
<div className="flex" style={{ justifyContent: "center"}}>
<div className="flex" style={{ justifyContent: "center" }}>
<div>
<Dialog.Root>
<Dialog.Trigger className='font-bold flex flex-col items-center'>

<Image src={ImageBuffer} width={200} height={200} alt={Name} style={{ borderRadius: "100%", height: 200, width: 200 }} className={`w-[${200}px] h-[${200}px] aspect-square rounded-2xl object-cover transition duration-300 ease-in-out hover:scale-105 `}/>
<div>{Name}</div>

<Dialog.Trigger className="flex flex-col items-center">
<Image
src={exec.profile_picture ? `https://${exec.profile_picture}` : "/blank_profile.jpg"}
width={200}
height={200}
alt={exec.name}
style={{ borderRadius: "100%", height: 200, width: 200 }}
className="w-[200px] h-[200px] aspect-square rounded-2xl object-cover transition duration-500 ease-in-out hover:scale-105 hover:border-4 border-dashed border-0 border-lang-orange"
/>

<div className="font-bold">{exec.name}</div>
<p className="text-gray-300">{exec.roles.join(" & ")}</p>

<div className="flex gap-2">
{Object.entries(exec.social_media_links).map(([platform, url]) => (
<SocialIcon
key={url}
url={url}
fgColor="white"
bgColor="#171717"
style={{ height: 40, width: 40 }}
target="_blank"
rel="noopener noreferrer"
className="transition duration-300 transform hover:scale-125"
/>
))}
</div>
</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
ID={ID}
Name={Name}
Position={Position.join(" & ")}
ImageBuffer={ImageBuffer}
Description={Description}
imageWidth={200} />
{/* FRANKLY THIS IS AWFUL */}
<Dialog.Content
className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] md:w-fit p-2 md:p-8 overflow-scroll"
style={{ border: "2px solid #F15A22", backgroundColor: "#171717" }}
>
<ProfileModal {...exec} />
</Dialog.Content>
</Dialog.Overlay>
</Dialog.Portal>
</Dialog.Root>
<p>{Position.join(" & ")}</p>
</div>
</div>
</div>
</div>);
}
</div>
);
}
36 changes: 9 additions & 27 deletions frontend/src/app/about/ExecProfiles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import ExecProfile from './ExecProfile';

interface Executive {
export interface Executive {
id: string;
roles: string[];
name: string;
pronouns: string;
profile_picture: string | null;
current_status: string;
bio: string;
first_term: string;
last_term: string;
social_media_links: { [key: string]: string }

}

async function getExecutives() {
Expand Down Expand Up @@ -55,21 +59,10 @@ export default async function ExecProfiles() {
{/* Block for current executives grouped by year */}
{Object.keys(groupedCurrentExecutives).map(year => (
<div key={year} className="flex-row gap-5">
<h2 className="text-3xl font-semibold pb-5">Current Executives:</h2>
<h2 className="text-3xl pb-5">Current Executives:</h2>
<div className=" flex flex-wrap flex-row gap-5 justify-center">
{groupedCurrentExecutives[year].map((exec) => (
<ExecProfile
key={exec.id}
ID={exec.id}
Position={exec.roles}
Name={exec.name}
ImageBuffer={
exec.profile_picture
? `https://${exec.profile_picture}`
: '/blank_profile.jpg'
}
Description={exec.bio || ''}
/>
<ExecProfile {...exec}/>
))}
</div>
</div>
Expand All @@ -78,21 +71,10 @@ export default async function ExecProfiles() {
{/* Block for retired executives grouped by year */}
{sortedRetiredYears.map(year => (
<div key={year} className="mt-40">
<h2 className="text-2xl font-semibold pb-5">Retired Executives - {year}:</h2>
<h2 className="text-2xl pb-5">Retired Executives - {year}:</h2>
<div className="flex flex-wrap flex-row gap-5 justify-center">
{groupedRetiredExecutives[year].map((exec) => (
<ExecProfile
key={exec.id}
ID={exec.id}
Position={exec.roles}
Name={exec.name}
ImageBuffer={
exec.profile_picture
? `https://${exec.profile_picture}`
: '/blank_profile.jpg'
}
Description={exec.bio || ''}
/>
<ExecProfile {...exec}/>
))}
</div>
</div>
Expand Down
62 changes: 32 additions & 30 deletions frontend/src/app/about/ProfileModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,51 @@ import * as Dialog from "@radix-ui/react-dialog";
import Image from "next/image";
import { DialogTitle } from "@radix-ui/react-dialog";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { SocialIcon } from "react-social-icons";

interface ProfileModalProps {
ID: String;
import { Executive } from "./ExecProfiles";

Name: string;

Position: string;

Description: string;

ImageBuffer: string;

imageWidth: number;
}

export default function ProfileModal({Name, Position, ImageBuffer, Description, imageWidth}: ProfileModalProps) {
export default function ProfileModal({ id, roles, name, pronouns, profile_picture, current_status, bio, first_term, last_term, social_media_links }: Executive) {
return (
// TODO: FIX modal description text doesn't scroll
<Dialog.Content className="relative max-w-[90vw] md:max-w-[80vw] max-h-[90vh] md:max-h-[70vh] overflow-y-scroll p-5">
<Dialog.Content className="relative max-w-full md:max-w-[80vw] max-h-[90vh] md:max-h-[70vh] overflow-y-scroll p-2 md:p-5">
<VisuallyHidden>
<DialogTitle>{Name}</DialogTitle>
<DialogTitle>{name}</DialogTitle>
</VisuallyHidden>

<div className="flex flex-col md:flex-row gap-5">
{/* Profile Image and Info Section */}
<div className="flex flex-col items-center gap-3">
<Image
src={ImageBuffer}
width={imageWidth}
height={imageWidth}
alt={`Profile photo of ${Name}`}
className="rounded-full aspect-square object-cover w-[20vw] h-[20vw] min-w-[200px] min-h-[200px]"
<div className="flex flex-col items-center gap-3 w-fit">
<Image
src={profile_picture ? `https://${profile_picture}` : '/blank_profile.jpg'}
width={100}
height={100}
alt={`Profile photo of ${name}`}
className="rounded-full aspect-square object-cover w-[100px] h-[100px] md:w-[200px] md:h-[200px] border-4 border-white"
/>
<div className="text-center">
<h2 className="font-bold text-xl">{Name}</h2>
<p className="text-gray-600">{Position}</p>
<h2 className="font-bold text-xl">{name}</h2>
<p className="text-gray-200">{roles.join(" & ")}</p>
</div>
</div>
{Object.entries(social_media_links).map(([platform, url]) => (
<SocialIcon
key={url}
url={url}
fgColor="white"
bgColor="#171717"
style={{ height: 40, width: 40 }}
target="_blank"
rel="noopener noreferrer"
className="transition duration-300 transform hover:scale-125"
/>
))}
</div>


{/* Description Section */}
<div className="flex flex-col flex-1 w-[30vw]">
<h3 className="font-bold text-lg mb-2 min-w-36">Description</h3>
<p className="text-white">{Description}</p>
<div className="flex flex-col flex-1 md:w-[30vw]">
<h3 className="font-bold text-lg mb-2 min-w-36">About:</h3>
<p className="text-white">{bio ? bio : "Nothing here. :("}</p>
</div>

{/* Close Button */}
Expand Down

0 comments on commit 776b094

Please sign in to comment.