Include "Did you know?" when fact is present and show on 'back' of AmbassadorCard

[itsjayway]

Reference: #325

Hey all, I'm back! This is an MVP of implementation. It's currently missing the tailwind 'flip' animation as of the current commits and I'll continue toward delivering that in this PR.

If this is sufficient to proceed, I'm looking for feedback in:

• "Did you know? ℹ️" placement on the 'front' of the card.
• Card 'back' formatting
• Implementation

Screen.Recording.2025-07-10.034824.mp4

[Copilot]

Pull Request Overview

This PR introduces a “Did you know?” fact feature to the AmbassadorCard component, allowing users to flip the card to see an ambassador’s fun fact. Key changes include:

• Extending the ambassador schema to include an optional fact field.
• Adding state and callback (useState/useCallback) to flip between front and back views.
• Conditionally rendering a “Did you know?” trigger on the front and displaying the fact on the back.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
src/hooks/useAmbassadors.tsx	Added fact as an optional field in the Zod schema
src/components/AmbassadorCard.tsx	Implemented flip state, UI for “Did you know?” and back-side layout

Comments suppressed due to low confidence (2)

src/components/AmbassadorCard.tsx:43

• [nitpick] The state variable flipped is ambiguous—consider renaming to isFlipped for clarity.

  const [flipped, setFlipped] = useState(false);

src/components/AmbassadorCard.tsx:43

• New flip logic and fact display should be covered by unit or integration tests to ensure correct behavior when toggling the card.

  const [flipped, setFlipped] = useState(false);

[Copilot]

The cursor prop on IconInfo isn’t a valid React prop. Consider moving this into the className (e.g. className="cursor-pointer").

Suggested change

	cursor="pointer"
	className="rounded-full text-alveus-green-400 outline-highlight transition-[outline] hover:outline-3 cursor-pointer"

[Copilot]

[nitpick] The front and back sides share a lot of similar container markup. Consider extracting common layout or styling into a shared component to reduce duplication.

Suggested change

	<div
	className={classes(
	"relative flex max-h-full min-h-[min(28rem,100%)] w-80 max-w-full flex-col justify-start rounded-lg bg-alveus-green-900 align-top text-xs shadow-xl",
	className,
	)}
	>
	<CardContainer className={className}>

[MattIPv4]

👀 Thank you for working on this! I think I agree with a lot of the feedback that copilot is giving.

Instead of having it be a heading with an icon that you need to clip, perhaps we could do a peeking/peeling corner that the user can click on to flip the card over? And perhaps when they hover on that corner we show a tooltip to give context on clicking to flip?

And I think quite important to this is an actual flip animation rather than just conditionally switching the content, though it sounds like you already plan to work on that!

[itsjayway]

Currently the simplest way I could manage rendering the dogear. It should be possible to have the fold "bring more with it" via translate-x/y, but that would reveal the unclipped portion of the card.

Screen.Recording.2025-07-13.000131.mp4

[MattIPv4]

That looks great -- I think with a shadow on that, and the tooltip, it should be just fine.

[MattIPv4]

Is the fact not already part of ambassadorSchema?

[MattIPv4]

One other thought, I wonder if it'd be worth splitting AmbassadorCard.tsx into ambassador/card-front.tsx + ambassador/card-back.tsx + ambassador/card.tsx (and AmbassadorButton.tsx could also move to ambassador/button.tsx)?