jayjennings
3f6dff5f24
- Add permissions logic for status options in corrective actions. - Create tests for permissions functionality. - Implement queries for user authentication and actions management. - Develop Actions page to display and manage corrective actions. - Create authentication pages for login, setup, and password reset. - Add IncidentDetail page to view incident details and associated actions. - Implement Settings page for user management and password changes.
24 lines
874 B
TypeScript
24 lines
874 B
TypeScript
import type { LucideIcon } from 'lucide-react'
|
|
import { toneClasses, type Tone } from '../lib/tones'
|
|
|
|
interface MetricCardProps {
|
|
label: string
|
|
value: string
|
|
delta?: string
|
|
icon: LucideIcon
|
|
tone: Tone
|
|
}
|
|
|
|
export function MetricCard({ label, value, delta, icon: Icon, tone }: MetricCardProps) {
|
|
return (
|
|
<div className="rounded-lg border border-line bg-white p-[13px] sm:p-[18px]">
|
|
<div className={`grid size-[35px] place-items-center rounded-[7px] ${toneClasses[tone]}`}>
|
|
<Icon size={19} />
|
|
</div>
|
|
<span className="mt-2.5 mb-1.5 block text-xs text-muted sm:mt-[15px]">{label}</span>
|
|
<strong className="block font-display text-[25px] font-semibold tracking-[-1px] text-ink sm:text-[30px]">{value}</strong>
|
|
{delta && <small className="mt-[9px] block text-[9px] text-[#7d8b86] sm:text-2xs">{delta}</small>}
|
|
</div>
|
|
)
|
|
}
|