feat(components): Create Event cards by jlim05 · Pull Request #71 · UoaWDCC/uoavc

jlim05 · 2026-05-18T05:10:48Z

Description

Created a reusable event card component that matches the figma design. Hover animation is included with also alt text being the name of the event in case there is an error. Currently the button is not accurate due to not having the required button component completed, therefore this can be implemented after it has been made.

Closes #58

Type of change

New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Manual testing (requires screenshots or videos)

Checklist before requesting a review

My code follows the style guidelines of this project
I have commented my code in hard-to-understand areas
I have made corresponding changes to the documentation if needed
I've requested a review from another team member

aleckshen

I think the event card looks great just some changes that need to be addressed and should we good to merge after!

aleckshen · 2026-05-18T10:56:43Z

+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
+
+type EventCardProps = {


The domain-specific EventCard should not live inside the shadcn primitive file. ui/ is reserved for generic shadcn primitives — domain components belong in their own folder (matching the Navbar / Footer pattern).

Could you:

Move the EventCardProps type + EventCard function (lines 96-150) into a new file src/components/EventCard/EventCard.tsx

Change to a named export: export function EventCard(...)

Re-export from src/components/index.ts: export { EventCard } from "./EventCard/EventCard"

Leave ui/card.tsx containing only the shadcn primitives (Card, CardHeader, etc.)

This keeps ui/ reusable for any future components that need a generic Card.

aleckshen · 2026-05-18T10:56:43Z

+  href: string
+}
+
+function EventCard({ variant, name, date, time, image, href }: EventCardProps) {


Three props from the type are accepted but never rendered: description, location, signUpLink. The component destructures only { variant, name, date, time, image, href }.

Issue #58 lists all of these as required for the card — without them the card doesn't actually show the event details. Either render them in the card body (per Figma) or remove them from the type if they're not supposed to be displayed on this card.

aleckshen · 2026-05-18T10:56:43Z

+  return (
+    <Card
+      className={cn(
+        "group hover:-translate-y-3 w-90 translate-y-0 gap-0 overflow-hidden rounded-none border-3 bg-transparent p-0 transition-transform duration-500 ease-in-out",


border-3 isn't a Tailwind class — Tailwind ships border (1px), border-2, border-4, border-8. This is a silent no-op, so the colored border (border-brand-yellow / border-brand-primary) won't render at the intended 3px width.

Change to border-2 or border-4 depending on what matches Figma. (Same issue exists on the Button PR #70.)

aleckshen · 2026-05-18T10:56:43Z

+          ) : (
+            <div className="h-full w-full bg-transparent" />
+          )}


Missing image fallback is invisible — <div className="h-full w-full bg-transparent" /> renders nothing. AC #3 says "Missing image handled gracefully (placeholder)."

Could you swap this for a visible placeholder, e.g. bg-muted with an icon (lucide-react has ImageIcon), or fall back to the UOAVC logo?

Suggested change

) : (

<div className="h-full w-full bg-transparent" />

)}

) : (

<div className="flex h-full w-full items-center justify-center bg-muted">

<ImageIcon className="size-12 text-muted-foreground" />

</div>

)}

aleckshen · 2026-05-18T10:56:43Z

+            <div className="h-full w-full bg-transparent" />
+          )}
+
+          <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/0 opacity-0 transition-all duration-300 ease-out group-hover:bg-brand-primary/15 group-hover:opacity-100">


The "learn more" link only appears on hover (group-hover:opacity-100). Keyboard users can't trigger hover, so this link is unreachable via tab navigation — accessibility issue.

Two options:

Add group-focus-within:opacity-100 group-focus-within:bg-brand-primary/15 to this overlay so the link reveals when the inner button receives focus.

Move the link out of the hover overlay entirely so it's always visible / always in the tab order.

Option 1 is the smaller change.

Done sir, option 1

aleckshen · 2026-05-18T10:56:43Z

+          )}
+
+          <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-black/0 opacity-0 transition-all duration-300 ease-out group-hover:bg-brand-primary/15 group-hover:opacity-100">
+            <Button asChild className="pointer-events-auto" variant="default">


variant="default" no longer exists on the Button component once PR #70 lands — the variants are being renamed to primary | secondary | tertiary | cta. This will fail typecheck (or fall back to no styling) after that PR merges.

Update to variant="primary" (or whichever variant matches the Figma button on the card overlay). Worth coordinating with Kyo on which one to use.

feat(components): add Event cards with hover animation.

1a51fdd

jlim05 linked an issue May 18, 2026 that may be closed by this pull request

[FRONTEND] Create Event cards #58

Open

5 tasks

aleckshen requested changes May 18, 2026

View reviewed changes

jlim05 added 5 commits May 23, 2026 15:43

refactor(components): split EventCard from shadcn card primitives

480b2ac

fix(components): render EventCard details

8799d27

fix(components): fix EventCard border width

5bcd890

fix(components): add EventCard missing image placeholder

3f5b699

fix(components): fix accessibility for EventCard button

7529286

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): Create Event cards#71

feat(components): Create Event cards#71
jlim05 wants to merge 6 commits into
mainfrom
feat/58-frontend-create-event-cards

jlim05 commented May 18, 2026

Uh oh!

aleckshen left a comment

Uh oh!

aleckshen May 18, 2026

Uh oh!

jlim05 May 23, 2026

Uh oh!

aleckshen May 18, 2026

Uh oh!

jlim05 May 23, 2026

Uh oh!

aleckshen May 18, 2026

Uh oh!

jlim05 May 23, 2026

Uh oh!

aleckshen May 18, 2026

Uh oh!

jlim05 May 23, 2026

Uh oh!

aleckshen May 18, 2026

Uh oh!

jlim05 May 23, 2026

Uh oh!

aleckshen May 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }

		type EventCardProps = {

-          ) : (
-            <div className="h-full w-full bg-transparent" />
-          )}
+          ) : (
+            <div className="flex h-full w-full items-center justify-center bg-muted">
+              <ImageIcon className="size-12 text-muted-foreground" />
+            </div>
+          )}

Conversation

jlim05 commented May 18, 2026

Description

Type of change

How Has This Been Tested?

Checklist before requesting a review

Uh oh!

aleckshen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants