issue54 Add HeaderCard component with 4 variants using Bloom color palette #74
Conversation
| /** | ||
| * HeaderCard – A statistic card with accent bar, value, label, and icon. | ||
| */ | ||
| export function HeaderCard({ value, label, variant }: HeaderCardProps) { |
There was a problem hiding this comment.
try to take props: color and icon, instead of variant
There was a problem hiding this comment.
the file name can be dashboard-card
There was a problem hiding this comment.
Pull request overview
This PR introduces a new HeaderCard UI component for displaying statistics in the admin dashboard. The component supports 4 variants (rooms, bookings, weekly, users) and follows the Bloom color palette with a left accent bar, value display, label, and icon.
- Adds a reusable
HeaderCardcomponent with variant-based styling - Includes a test page showcasing all 4 card variants
- Integrates with the existing Bloom color system
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
client/src/components/ui/header-card.tsx |
New statistic card component with 4 variants, each featuring a colored accent bar and icon |
client/src/app/test/header-card/page.tsx |
Test page demonstrating all HeaderCard variants in a responsive grid layout |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Variant colors and icons mapping | ||
| const variantMap = { | ||
| rooms: { | ||
| color: "#F3D03A", // Yellow |
There was a problem hiding this comment.
The hardcoded hex color #F3D03A doesn't match the Bloom yellow color defined in the CSS variables (#f3d03aff). The CSS variable defines the color as #f3d03aff (with alpha channel), while this uses #F3D03A. Consider using Tailwind's bg-bloom-yellow class or the CSS variable var(--bloom-yellow) for consistency with the rest of the codebase.
| color: "#F3D03A", // Yellow | |
| color: "var(--bloom-yellow)", // Bloom yellow (from CSS variable) |
| Icon: Building, | ||
| }, | ||
| bookings: { | ||
| color: "#67D4EC", // Primary blue |
There was a problem hiding this comment.
The hardcoded hex color #67D4EC doesn't match the Bloom blue color defined in the CSS variables (#67d4ecff). The CSS variable defines the color as #67d4ecff (with alpha channel), while this uses #67D4EC. Consider using Tailwind's bg-bloom-blue class or the CSS variable var(--bloom-blue) for consistency with the rest of the codebase.
| color: "#67D4EC", // Primary blue | |
| color: "var(--bloom-blue)", // Primary blue |
| Icon: Calendar, | ||
| }, | ||
| weekly: { | ||
| color: "#BE1B3B", // Bloom red |
There was a problem hiding this comment.
The hardcoded hex color #BE1B3B doesn't match the Bloom red color defined in the CSS variables (#be1b3bff). The CSS variable defines the color as #be1b3bff (with alpha channel), while this uses #BE1B3B. Consider using Tailwind's bg-bloom-red class or the CSS variable var(--bloom-red) for consistency with the rest of the codebase.
| color: "#BE1B3B", // Bloom red | |
| color: "var(--bloom-red)", // Bloom red |
| Icon: ClipboardList, | ||
| }, | ||
| users: { | ||
| color: "#2332FF", // Orbit blue |
There was a problem hiding this comment.
The hardcoded hex color #2332FF doesn't match the Bloom orbit color defined in the CSS variables (#2332ffff). The CSS variable defines the color as #2332ffff (with alpha channel), while this uses #2332FF. Consider using Tailwind's bg-bloom-orbit class or the CSS variable var(--bloom-orbit) for consistency with the rest of the codebase.
| color: "#2332FF", // Orbit blue | |
| color: "var(--bloom-orbit)", // Orbit blue (from CSS variable) |
| <div | ||
| className={cn( | ||
| "relative flex items-center justify-between rounded-lg bg-white p-4 pl-6 shadow-sm", | ||
| "border border-[#E5E1E6]", // Bloom gray border |
There was a problem hiding this comment.
The hardcoded hex color #E5E1E6 for the border doesn't match the Bloom gray color defined in the CSS variables (#e5e1e6ff). Consider using Tailwind's border-bloom-gray class or the CSS variable var(--bloom-gray) for consistency with the rest of the codebase.
| "border border-[#E5E1E6]", // Bloom gray border | |
| "border border-bloom-gray", // Bloom gray border |
| <div | ||
| className={cn( | ||
| "relative flex items-center justify-between rounded-lg bg-white p-4 pl-6 shadow-sm", | ||
| "border border-[#E5E1E6]", // Bloom gray border | ||
| )} | ||
| > | ||
| {/* Accent bar */} | ||
| <div | ||
| className="absolute bottom-0 left-0 top-0 w-2 rounded-l-lg" | ||
| style={{ backgroundColor: config.color }} | ||
| /> | ||
|
|
||
| {/* Value + label */} | ||
| <div className="flex flex-col"> | ||
| <span className="text-2xl font-semibold text-black">{value}</span> | ||
| <span className="text-sm text-black">{label}</span> | ||
| </div> | ||
|
|
||
| {/* Icon */} | ||
| <div | ||
| className="flex h-10 w-10 items-center justify-center rounded-full border-2 bg-white" | ||
| style={{ borderColor: config.color }} | ||
| > | ||
| <Icon className="h-5 w-5" style={{ color: config.color }} /> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
The card component lacks proper semantic HTML structure and ARIA attributes. Consider wrapping this in a <article> or <section> tag, and add role="region" with aria-labelledby pointing to the label for better screen reader support. Additionally, the value should be announced properly by screen readers.
| className="flex h-10 w-10 items-center justify-center rounded-full border-2 bg-white" | ||
| style={{ borderColor: config.color }} | ||
| > | ||
| <Icon className="h-5 w-5" style={{ color: config.color }} /> |
There was a problem hiding this comment.
The icon is purely decorative and should have aria-hidden="true" to prevent screen readers from announcing it, since the meaning is already conveyed by the label text.
| <Icon className="h-5 w-5" style={{ color: config.color }} /> | |
| <Icon className="h-5 w-5" style={{ color: config.color }} aria-hidden="true" /> |
|
the screenshot looks great, can make it in |
Change Summary
This PR is for HeaderCard UI component used in the admin dashboard.
The component supports 4 variants. Each of them includes a left accent bar, value display, label, and icon
Change Form
Other Information
Related issue