[CDD ] Build UpcomingQuizCard component

[Ditmar]

Component purpose

Create a card component to display information about an upcoming quiz or competition, including the title, date, description and a registration call-to-action.

Requirements

• Accept props: title, date, description, and onRegister callback.
• Use MUI Card or Paper as the base and style it using styled() or sx with design system tokens for spacing, typography and colors.
• Highlight the date with an icon or badge; provide a default date format constant in .constants.ts.
• Define prop types in .types.ts and consider extending MUI card props.
• If internal state is needed, isolate it in a hook (e.g., useUpcomingQuizCard).
• Write unit tests with Jest/Testing Library that verify the date formatting and that the onRegister callback is triggered when the button is clicked, using data-testid attributes.
• Provide Storybook stories for different scenarios (with and without description) and allow interactive props via args.
• Document the component in .docs.mdx explaining usage and props.
  Desdign

File structure

UpcomingQuizCard/
├── UpcomingQuizCard.tsx
├── UpcomingQuizCard.types.ts
├── UpcomingQuizCard.constants.ts
├── UpcomingQuizCard.styles.ts
├── UpcomingQuizCard.hook.ts (optional)
├── UpcomingQuizCard.utils.ts (optional)
├── UpcomingQuizCard.test.tsx
├── UpcomingQuizCard.stories.tsx
└── UpcomingQuizCard.docs.mdx

https://www.figma.com/design/Rh2fODqtUeQvC4mBfUp6YI/seminario-coding?node-id=0-1&p=f&t=PgBYi4onHpKSffCV-0

[Ditmar]

Qa by @ChambiSilvia