Skip to content

issue54 Add HeaderCard component with 4 variants using Bloom color palette #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
WynonnaSun wants to merge 2 commits into from
Closed

issue54 Add HeaderCard component with 4 variants using Bloom color palette #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
486d468
Add HeaderCard component with 4 variants using Bloom color palette
WynonnaSun Dec 8, 2025
d37a5f4
fix: format header-card with Prettier
WynonnaSun Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions client/src/app/test/header-card/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { HeaderCard } from "@/components/ui/header-card";

export default function TestHeaderCardPage() {
return (
<div className="min-h-screen bg-gray-50 p-8">
<div className="mx-auto max-w-7xl">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<HeaderCard value={5} label="Total Meeting Rooms" variant="rooms" />
<HeaderCard value={20} label="Total Bookings" variant="bookings" />
<HeaderCard value={2} label="Weekly Bookings" variant="weekly" />
<HeaderCard value={3} label="Total Users" variant="users" />
</div>
</div>
</div>
);
}
68 changes: 68 additions & 0 deletions client/src/components/ui/header-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
"use client";

import { Building, Calendar, ClipboardList, Users } from "lucide-react";

import { cn } from "@/lib/utils";

interface HeaderCardProps {
value: number | string;
label: string;
variant: "rooms" | "bookings" | "weekly" | "users";
}

// Variant colors and icons mapping
const variantMap = {
rooms: {
color: "#F3D03A", // Yellow
Copy link

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
color: "#F3D03A", // Yellow
color: "var(--bloom-yellow)", // Bloom yellow (from CSS variable)

Copilot uses AI. Check for mistakes.
Icon: Building,
},
bookings: {
color: "#67D4EC", // Primary blue
Copy link

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
color: "#67D4EC", // Primary blue
color: "var(--bloom-blue)", // Primary blue

Copilot uses AI. Check for mistakes.
Icon: Calendar,
},
weekly: {
color: "#BE1B3B", // Bloom red
Copy link

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
color: "#BE1B3B", // Bloom red
color: "var(--bloom-red)", // Bloom red

Copilot uses AI. Check for mistakes.
Icon: ClipboardList,
},
users: {
color: "#2332FF", // Orbit blue
Copy link

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
color: "#2332FF", // Orbit blue
color: "var(--bloom-orbit)", // Orbit blue (from CSS variable)

Copilot uses AI. Check for mistakes.
Icon: Users,
},
};

/**
* HeaderCard – A statistic card with accent bar, value, label, and icon.
*/
export function HeaderCard({ value, label, variant }: HeaderCardProps) {
Copy link
Contributor

@ErikaKK ErikaKK Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

try to take props: color and icon, instead of variant

Copy link
Contributor

@ErikaKK ErikaKK Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the file name can be dashboard-card

const config = variantMap[variant];
const Icon = config.Icon;

return (
<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
Copy link

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
"border border-[#E5E1E6]", // Bloom gray border
"border border-bloom-gray", // Bloom gray border

Copilot uses AI. Check for mistakes.
)}
>
{/* 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 }} />
Copy link

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
<Icon className="h-5 w-5" style={{ color: config.color }} />
<Icon className="h-5 w-5" style={{ color: config.color }} aria-hidden="true" />

Copilot uses AI. Check for mistakes.
</div>
</div>
Comment on lines +41 to +66
Copy link

Copilot AI Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
);
}