You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.9 KiB
Markdown
45 lines
1.9 KiB
Markdown
# Reusable Metric Card Component Prompt
|
|
|
|
Create a reusable `MetricCard` for `<target feature or shared location>`.
|
|
Inspect the existing `Card`, `Badge`, `Skeleton`, typography, and dashboard
|
|
patterns before implementation.
|
|
|
|
## React contract
|
|
|
|
- Props: `title`, `value`, optional `unit`, `trend`, `status`, `description`,
|
|
`icon`, `isLoading`, `onClick`, and `className`.
|
|
- Keep value types display-friendly: `<string | number | domain formatter>`.
|
|
- Make the whole card interactive only when `onClick` is provided.
|
|
- Prefer composition for optional footer or chart content:
|
|
`<children or footer slot requirements>`.
|
|
- Forward the root element ref and extend suitable native element attributes.
|
|
|
|
## Styling theme: operational signal
|
|
|
|
- Use a calm `bg-card` surface with a thin `border-border` outline.
|
|
- The metric value is the strongest element; title and timestamp are quieter.
|
|
- Use tabular or mono numerals only when consistent with the target dashboard.
|
|
- Status is communicated by text/icon plus color, never color alone.
|
|
- A narrow accent, badge, or icon may show health without flooding the card with
|
|
color.
|
|
- Hover elevation appears only for interactive cards.
|
|
- Loading skeletons preserve the final card dimensions.
|
|
|
|
## Responsive behavior
|
|
|
|
- Minimum usable width: `<for example 220px>`.
|
|
- Value and unit must not overlap.
|
|
- Long titles truncate or wrap to two lines.
|
|
- Footer content stacks below the metric on narrow screens.
|
|
|
|
## Acceptance criteria
|
|
|
|
1. The card works with partial data and has a clear unavailable state.
|
|
2. Loading, healthy, warning, critical, and neutral presentations are defined.
|
|
3. An interactive card supports mouse, Enter, and Space with visible focus.
|
|
4. The public API contains no API calls, routing, or feature-specific auth.
|
|
5. Light and dark themes use semantic tokens.
|
|
|
|
Run focused linting allowed by the repository instructions and finish with a
|
|
simple **TL;DR**.
|