A React component that renders a compact metric/KPI card for dashboards, supporting values, percentage displays, circular progress rings, icons, tooltips, and optional navigation via Next.js Link. ## Key Components ### Exports - **`DashboardInfoCard`** — Main card component - **`DashboardInfoCardProps`** — Full prop interface - **`DashboardInfoCardPercentageDisplay`** — Union type controlling percentage render mode: `'auto'` | `'plain'` | `'tag'` - **`DashboardInfoCardProgressSize`** — Union type for responsive ring sizing: `number | { base, md?, lg? }` ### Internal Helpers - **`renderPercentage()`** — Returns a `Tag` or plain text `

` based on `percentageDisplay` and `progressVariant` - **`renderProgress()`** — Generates responsive `CircularProgress` rings using Tailwind display utilities; stroke width scales proportionally with ring size ## Usage Example ```typescript import { DashboardInfoCard } from './dashboard-info-card' // Basic metric card // Navigable card with icon and tooltip } href="/reports/sla" tooltip="Percentage of tickets resolved within SLA" progressVariant="success" percentage={94} showProgress progressSize={{ base: 24, md: 56, lg: 72 }} /> // Plain percentage with custom value size ``` ## Notes - When `href` is provided, the card renders as a Next.js `Link` with hover accent styles - Responsive ring sizing uses Tailwind `hidden`/`block` utilities; class names must be static strings for JIT scanning - Card height is fixed (`h-16` mobile / `h-[104px]` desktop) per Figma spec; `items-center` absorbs overflow from tall title tags --- **Source:** [`dashboard-info-card.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/dashboard-info-card.tsx)