Add BoardCard & Board Component #109
Conversation
wesleylwu
commented
Feb 2, 2025
wesleylwu
commented
|
am i approaching this right so far? im struggling to align the photos with the borders as well as making the images of the board members not cover the border. |
public/board/redDiamond.webp
Outdated
There was a problem hiding this comment.
all the other colored diamonds will need to be added
src/app/board/page.tsx
Outdated
src/components/board/Board.js
Outdated
| @@ -0,0 +1,21 @@ | |||
| "use client"; | |||
There was a problem hiding this comment.
not needed, also this file should be a tsx file
src/components/board/Board.js
Outdated
| {boardInfo.map((CARD) => ( | ||
| <BoardCard | ||
| name={CARD.name} | ||
| title={CARD.title} | ||
| image={CARD.image} | ||
| color={CARD.color} | ||
| /> |
There was a problem hiding this comment.
make sure you're assigning a key to every mapped CARD.
src/components/board/BoardCard.js
Outdated
| <Image | ||
| src={image} | ||
| alt="picture of person" | ||
| className="absolute object-cover" | ||
| width={300} | ||
| height={300} | ||
| /> |
There was a problem hiding this comment.
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%);
}
tsconfig.json
Outdated
| "src/components/board/Board.js", | ||
| "src/components/board/BoardCard.js" |
There was a problem hiding this comment.
remove since you should be using tsx files
| // { | ||
| // image: Stephanie, | ||
| // name: "Stephanie Huang", | ||
| // title: "Academic Chair", | ||
| // color: "csa-yellow-300", | ||
| // }, |
There was a problem hiding this comment.
why'd you comment this out?
src/components/board/BoardCard.js
Outdated
There was a problem hiding this comment.
this needs to be a tsx file
stanleylew5
added
changes requested
and removed
help wanted
the diamond should be relatively positioned, and the photo of the officers should be absolutely positioned within it |
|
|
