Skip to content

Commit

Permalink
Fixed build errors
Browse files Browse the repository at this point in the history
  • Loading branch information
rishit-singh committed Mar 26, 2024
1 parent 26a18c3 commit 9bbb323
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 26 deletions.
42 changes: 30 additions & 12 deletions frontend/src/app/ExecProfile.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {Component} from "react";
import Image from "next/image";
import {useState, useEffect} from "react";
import { init } from "next/dist/compiled/@vercel/og/satori";

interface ExecProfileProps
{
Expand Down Expand Up @@ -32,28 +33,45 @@ const PositionStrings: string[] = [

export default function ExecProfile({ID, Name, ImageBuffer, Position, Description} : ExecProfileProps)
{
const [imageWidth, setImageWidth] = useState<number>(window.innerWidth <= 800 ? 100 : 200);
let initialValue: number = 200;

useEffect(() => {
const handleResize = () => {
if (window !== undefined) {
if (window.innerWidth <= 800)
setImageWidth(100);
else
setImageWidth(200);
};

window.addEventListener('resize', handleResize);
window.addEventListener('load', handleResize);
initialValue = 100;
}
});

const [imageWidth, setImageWidth] = useState<number>(initialValue);

useEffect(() => {
const handleResize = () => {
if (window !== undefined)
{
if (window.innerWidth <= 800)
setImageWidth(100);
else
setImageWidth(200);
}
};

if (window !== undefined)
{

window.addEventListener('resize', handleResize);
window.addEventListener('load', handleResize);
}

return () => {
window.removeEventListener('resize', handleResize);
if (window !== undefined)
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>{name}</div>)}</span> {/* Adjust margin-top as needed to position below image center */}
<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>);
}

Expand Down
48 changes: 37 additions & 11 deletions frontend/src/app/ExecProfiles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,43 +10,69 @@ export default function ExecProfiles() {

const [profileSections, setProfileSections] = useState<ExecProfileObject[][]>([]);

const [cols, setCols] = useState<number>(window.innerWidth <= 800 ? 2 : 3);
let initialValue: number = 3;

useEffect(() => {
if (window !== undefined) {
if (window.innerWidth <= 800)
initialValue = 2;
}
});

const [cols, setCols] = useState<number>(initialValue);

const updateSections = () => {
const sections = [];

for (let x = 0; x < profilesSorted.length / cols; x++)
{
sections.push(profilesSorted.slice(x * cols, x * cols + cols));
}

setProfileSections(sections);
};

useEffect(() => {
if (profileSections.length < 1)
updateSections();
});

useEffect(() => {
const handleResize = () => {
if (window.innerWidth <= 800)
setCols(2);
else
setCols(3);
if (window !== undefined)
{
if (window.innerWidth <= 800)
{
setCols(2);
updateSections();
}
else
{
setCols(3);
updateSections();
}
}
};

window.addEventListener('load', handleResize);
window.addEventListener('resize', handleResize);
if (window !== undefined)
{
window.addEventListener('load', handleResize);
window.addEventListener('resize', handleResize);
}

return () => {
window.removeEventListener('resize', handleResize);
if (window !== undefined)
window.removeEventListener('resize', handleResize);
};
}, []);
// max-[800px]:grid max-[800px]:content-center max-[800px]:grid-flow-col max-[800px]:auto-cols-min max-[800px]:justify-items-center
return (
<div className="flex flex-col gap-5">
{
profileSections.map(profiles => (
<div className={"flex flex-row gap-32 max-[800px]:gap-10"}>
<div className={"flex flex-row gap-32 max-[800px]:gap-10"} key={profileSections.indexOf(profiles)}>
{
profiles.map(profile => (
<ExecProfile
key={profile.ID}
Position={profile.Position.Title}
ID={profile.ID}
Name={profile.Name}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function Footer()
if (links.length < 1)
linksMap.forEach((value: string, key: string) => {
linksTemp.push(<>
<a href={value} className="hover:text-lang-orange">{key}</a>
<a key={key} href={value} className="hover:text-lang-orange">{key}</a>
</>);
});

Expand Down
2 changes: 0 additions & 2 deletions frontend/src/app/HomePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import Footer from "./Footer";

let InstanceCount: number = 0;

// Global.SetupWindow();

interface HomePageProps
{
}
Expand Down

0 comments on commit 9bbb323

Please sign in to comment.