Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add BoardCard & Board Component #109

Merged
merged 8 commits into from
Feb 3, 2025
Merged

Add BoardCard & Board Component #109

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3359a11
mapped the board member data. fixed typos in boardInfo.ts
wesleylwu Feb 2, 2025
2440de4
attempted to allign board member images and border
wesleylwu Feb 2, 2025
3b054f8
fixed positioning of diamonds and board member images. added differen…
wesleylwu Feb 2, 2025
1a22a43
removed color
wesleylwu Feb 2, 2025
163d4d3
Merge branch 'dev' into wesleylwu/Board
wesleylwu Feb 2, 2025
b3f74f6
fixed merge conflict
wesleylwu Feb 2, 2025
ac4a641
fixed merge conflict again
wesleylwu Feb 2, 2025
9428702
i never want to see this ever again
stanleylew5 Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/board/redDiamond.webp
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all the other colored diamonds will need to be added

Binary file not shown.
8 changes: 7 additions & 1 deletion src/app/board/page.tsx
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this looks right

Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import Board from "@/components/board/Board";

const Page = () => {
return <div className="bg-csa-tan-100"></div>;
return (
<div className="bg-csa-tan-100">
<Board />
</div>
);
};

export default Page;
21 changes: 21 additions & 0 deletions src/components/board/Board.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
"use client";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not needed, also this file should be a tsx file

import BoardCard from "./BoardCard";
import { boardInfo } from "@/data/boardInfo.ts";

const Board = () => {
return (
<>
<div className="mb-[16%] mt-[5%] grid grid-cols-3 gap-2 md:grid-cols-3">
{boardInfo.map((CARD) => (
<BoardCard
name={CARD.name}
title={CARD.title}
image={CARD.image}
color={CARD.color}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make sure you're assigning a key to every mapped CARD.

))}
</div>
</>
);
};
export default Board;
5 changes: 0 additions & 5 deletions src/components/board/Board.tsx
View file
Open in desktop

This file was deleted.

34 changes: 34 additions & 0 deletions src/components/board/BoardCard.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this needs to be a tsx file

Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import Image from "next/image";
import redDiamond from "@/public/board/redDiamond.webp";

const BoardCard = ({ image, name, title, color }) => {
return (
<div className="">
<div className="= flex justify-center">
<Image
src={redDiamond}
alt="redDiamond"
className=""
width={600}
height={600}
/>
<Image
src={image}
alt="picture of person"
className="absolute object-cover"
width={300}
height={300}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will need to be positioned absolutely within a relative diamond. to make your photo into a diamond feel free to copy this code into the globals.css file and you can use it by typing diamond into the tailwind css classnames

.diamond {
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

</div>
<p
className={`flex justify-center text-center text-3xl text-[90%] md:text-4xl ${color}`}
>
{name}
</p>
<p className="flex justify-center text-center text-2xl text-[90%] md:text-4xl">
{title}
</p>
</div>
);
};
export default BoardCard;
20 changes: 10 additions & 10 deletions src/data/boardInfo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Brianna from "@/public/board/Briana_Lam.webp";
import Ryan_Lew from "@/public/board/Ryan_Lew.webp";
import Megan from "@/public/board/Megan_Ho.webp";
import Renne from "@/public/board/Renne_Sanchex.webp";
import Renne from "@/public/board/Renne_Sanchez.webp";
import Marcus from "@/public/board/Marcus_Lee.webp";
import Dominic from "@/public/board/Dominic_Rivera.webp";
import Alex from "@/public/board/Alex_Sin.webp";
Expand All @@ -15,18 +15,18 @@ import Yuhan from "@/public/board/Yuhan_Shi.webp";
import Joshua from "@/public/board/Joshua_Yu.webp";
import Anson from "@/public/board/Anson_Gao.webp";
import Kathy from "@/public/board/Kathy_Liu.webp";
import Connor from "@/public/board/Connor_Lao.webp";
import Connor from "@/public/board/Connor_Lau.webp";
import Mia from "@/public/board/Mia_Chiang.webp";
import Samantha from "@/public/board/Samantha_Lee.webp";
import Nathan from "@/public/board/Nathan_Cheung.webp";
import Peter from "@/public/board/Peter_Hsia.webp";
import Andy from "@/public/board/Andy_Banh.webp";
import Kaelyn from "@/public/board/Kaelyn_Lam.webp";
import Aidan from "@/public/board/Aidan_Lam.webp";
import Andrew from "@public/board/Andrew_Zhang.webp";
import Andrew from "@/public/board/Andrew_Zhang.webp";
import Caitlyn from "@/public/board/Caitlyn_Hang.webp";
import Ryan_Nguyen from "@/public/board/Ryan_Nguyen.webp";
import Stephanie from "@/public/board/Stephanie_Huang.webp";
// import Stephanie from "@/public/board/Stephanie_Huang.webp";

export const boardInfo = [
{
Expand Down Expand Up @@ -197,10 +197,10 @@ export const boardInfo = [
title: "Philanthropy Chair",
color: "csa-yellow-300",
},
{
image: Stephanie,
name: "Stephanie Huang",
title: "Academic Chair",
color: "csa-yellow-300",
},
// {
// image: Stephanie,
// name: "Stephanie Huang",
// title: "Academic Chair",
// color: "csa-yellow-300",
// },
Comment on lines +200 to +205
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why'd you comment this out?

];
9 changes: 8 additions & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,13 @@
},
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"src/components/board/Board.js",
"src/components/board/BoardCard.js"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove since you should be using tsx files

],
"exclude": ["node_modules"]
}
Loading