Patient Medical Record
blockhealthcareEpic/Cerner-style EHR patient chart and clinical summary: patient demographics header with allergy alerts, latest vitals strip, active diagnoses and ICD-10 problem list, active medications table, recent clinical encounter notes (HPI and Assessment & Plan), upcoming appointments schedule, care team directory, and emergency contacts.
Installation
$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/patient-medical-record.json$npx shadcn@latest add https://uipkge.dev/r/react/patient-medical-record.json$yarn dlx shadcn@latest add https://uipkge.dev/r/react/patient-medical-record.json$bunx shadcn@latest add https://uipkge.dev/r/react/patient-medical-record.jsonNamed registry:
npx shadcn@latest add @uipkge-react/patient-medical-recordInstalls to:components/blocks/Variants
Loading interactive previews…
Loading interactive previews…
Files installed (1)
components/blocks/PatientMedicalRecord.tsx34.2 kB
'use client' import { Activity, AlertTriangle, Calendar, CheckCircle2, Clock, Droplets, FileText, FlaskConical, HeartPulse, MapPin, Phone, Pill, Printer, Scale, Stethoscope, Thermometer, UserCheck, Wind, } from 'lucide-react' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Separator } from '@/components/ui/separator' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export function PatientMedicalRecord() { return ( <div data-slot="patient-medical-record" className="bg-background text-foreground w-full space-y-6"> {/* Patient Header Card */} <header className="bg-card border-border rounded-xl border p-5 shadow-xs sm:p-6"> <div className="flex flex-col gap-5"> {/* Top Row: Patient Demographics & Action Buttons */} <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between"> <div className="flex flex-wrap items-start gap-4 sm:items-center"> <Avatar className="ring-border size-14 ring-2 sm:size-16"> <AvatarImage src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80" alt="David Chen" /> <AvatarFallback className="bg-primary/10 text-primary text-base font-semibold">DC</AvatarFallback> </Avatar> <div className="space-y-1"> <div className="flex flex-wrap items-center gap-2"> <h1 className="text-foreground text-xl font-bold tracking-tight sm:text-2xl">David Chen</h1> <span className="text-muted-foreground text-sm font-medium">48 yrs · Male</span> <Badge variant="outline" className="border-success/30 bg-success/10 text-success gap-1.5 font-medium"> <span className="bg-success size-1.5 animate-pulse rounded-full" /> Active Inpatient · Room 412B </Badge> </div> <div className="text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-xs"> <span className="text-foreground flex items-center gap-1 font-mono font-medium">#MRN-849201</span> <span className="flex items-center gap-1"> <Calendar className="size-3.5" /> DOB: <strong className="text-foreground font-medium tabular-nums">Oct 14, 1978</strong> </span> <span className="flex items-center gap-1"> <Droplets className="text-destructive size-3.5" /> Blood: <strong className="text-foreground font-medium">O+</strong> </span> <span className="flex items-center gap-1"> <Stethoscope className="text-primary size-3.5" /> PCP: <strong className="text-foreground font-medium">Dr. Emily Vance, MD</strong> </span> </div> </div> </div> {/* Action Buttons */} <div className="flex flex-wrap items-center gap-2"> <Button variant="outline" size="sm" className="gap-1.5 text-xs font-medium"> <FlaskConical className="text-primary size-3.5" /> Order Labs </Button> <Button variant="outline" size="sm" className="gap-1.5 text-xs font-medium"> <Pill className="text-primary size-3.5" /> Write Prescription </Button> <Button variant="outline" size="sm" className="gap-1.5 text-xs font-medium"> <Printer className="size-3.5" /> Print Summary </Button> </div> </div> {/* Red Alert Severe Allergy Pill / Banner */} <div className="border-destructive/30 bg-destructive/10 text-destructive dark:bg-destructive/20 flex flex-wrap items-center justify-between gap-3 rounded-lg border px-4 py-2.5 text-xs font-medium sm:text-sm"> <div className="flex items-center gap-2"> <AlertTriangle className="text-destructive size-4 shrink-0" /> <span> Severe Allergies: <strong className="font-semibold underline">Penicillin</strong> (Anaphylaxis),{' '} <strong className="font-semibold underline">Sulfa drugs</strong> (Severe Rash) </span> </div> <Badge variant="destructive" className="text-xs font-semibold tracking-wider uppercase"> High Alert </Badge> </div> </div> </header> {/* 2-Column Clinical Layout */} <div className="grid grid-cols-1 gap-6 lg:grid-cols-12"> {/* Left Main Panel (65%) */} <main className="space-y-6 lg:col-span-8"> {/* Latest Vitals Strip */} <Card> <CardHeader className="flex-row items-center justify-between space-y-0 pb-3"> <div> <CardTitle className="flex items-center gap-2 text-base font-semibold"> <Activity className="text-primary size-4" /> Latest Vitals Strip </CardTitle> <CardDescription className="text-xs"> Recorded today at 08:30 AM EDT · Nurse J. Miller, RN (Floor 4 East) </CardDescription> </div> <Badge variant="secondary" className="text-xs font-normal"> Within Normal Limits </Badge> </CardHeader> <CardContent> <div className="grid grid-cols-2 gap-3 sm:grid-cols-5"> {/* BP */} <div className="bg-muted/30 border-border space-y-1 rounded-lg border p-3"> <div className="text-muted-foreground flex items-center justify-between"> <span className="text-xs font-medium tracking-wider uppercase">Blood Pressure</span> <HeartPulse className="text-destructive size-3.5" /> </div> <div className="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl"> 124/82 </div> <p className="text-muted-foreground text-xs">mmHg · Normal</p> </div> {/* HR */} <div className="bg-muted/30 border-border space-y-1 rounded-lg border p-3"> <div className="text-muted-foreground flex items-center justify-between"> <span className="text-xs font-medium tracking-wider uppercase">Heart Rate</span> <Activity className="text-destructive size-3.5" /> </div> <div className="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl">72</div> <p className="text-muted-foreground text-xs">bpm · Resting</p> </div> {/* Temp */} <div className="bg-muted/30 border-border space-y-1 rounded-lg border p-3"> <div className="text-muted-foreground flex items-center justify-between"> <span className="text-xs font-medium tracking-wider uppercase">Temp (Oral)</span> <Thermometer className="text-warning size-3.5" /> </div> <div className="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl">98.6</div> <p className="text-muted-foreground text-xs">°F · Afebrile</p> </div> {/* SpO2 */} <div className="bg-muted/30 border-border space-y-1 rounded-lg border p-3"> <div className="text-muted-foreground flex items-center justify-between"> <span className="text-xs font-medium tracking-wider uppercase">Oxygen SpO2</span> <Wind className="text-info size-3.5" /> </div> <div className="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl">98%</div> <p className="text-muted-foreground text-xs">Room air</p> </div> {/* BMI */} <div className="bg-muted/30 border-border space-y-1 rounded-lg border p-3"> <div className="text-muted-foreground flex items-center justify-between"> <span className="text-xs font-medium tracking-wider uppercase">BMI</span> <Scale className="text-success size-3.5" /> </div> <div className="text-foreground text-xl font-bold tracking-tight tabular-nums sm:text-2xl">24.2</div> <p className="text-muted-foreground text-xs">kg/m² · Normal</p> </div> </div> </CardContent> </Card> {/* Active Diagnoses & Problem List */} <Card> <CardHeader className="flex-row items-center justify-between space-y-0 pb-3"> <div> <CardTitle className="flex items-center gap-2 text-base font-semibold"> <FileText className="text-primary size-4" /> Active Diagnoses & Problem List </CardTitle> <CardDescription className="text-xs"> Chronic and active conditions under clinical management </CardDescription> </div> <Badge variant="secondary" className="text-xs font-normal"> 3 Active Conditions </Badge> </CardHeader> <CardContent className="space-y-3"> {/* Item 1: Type 2 Diabetes */} <div className="border-border bg-card flex flex-col justify-between gap-2 rounded-lg border p-3.5 sm:flex-row sm:items-center"> <div className="space-y-1"> <div className="flex flex-wrap items-center gap-2"> <span className="text-foreground text-sm font-semibold">Type 2 Diabetes Mellitus</span> <Badge variant="outline" className="font-mono text-xs"> ICD-10 E11.9 </Badge> <Badge variant="secondary" className="text-xs"> Chronic </Badge> </div> <p className="text-muted-foreground text-xs"> Onset: <span className="text-foreground font-medium">March 2019</span> · Managed with oral hypoglycemics · Last HbA1c: <span className="text-foreground font-medium">7.2%</span> </p> </div> <div className="text-left sm:text-right"> <span className="text-muted-foreground block text-xs">Diagnosed by</span> <span className="text-foreground text-xs font-medium">Dr. Emily Vance, MD</span> </div> </div> {/* Item 2: Essential Hypertension */} <div className="border-border bg-card flex flex-col justify-between gap-2 rounded-lg border p-3.5 sm:flex-row sm:items-center"> <div className="space-y-1"> <div className="flex flex-wrap items-center gap-2"> <span className="text-foreground text-sm font-semibold">Essential (Primary) Hypertension</span> <Badge variant="outline" className="font-mono text-xs"> ICD-10 I10 </Badge> <Badge variant="secondary" className="text-xs"> Controlled </Badge> </div> <p className="text-muted-foreground text-xs"> Onset: <span className="text-foreground font-medium">November 2021</span> · ACE inhibitor therapy · Monitored daily </p> </div> <div className="text-left sm:text-right"> <span className="text-muted-foreground block text-xs">Diagnosed by</span> <span className="text-foreground text-xs font-medium">Dr. Emily Vance, MD</span> </div> </div> {/* Item 3: Asthma */} <div className="border-border bg-card flex flex-col justify-between gap-2 rounded-lg border p-3.5 sm:flex-row sm:items-center"> <div className="space-y-1"> <div className="flex flex-wrap items-center gap-2"> <span className="text-foreground text-sm font-semibold">Moderate Persistent Asthma</span> <Badge variant="outline" className="font-mono text-xs"> ICD-10 J45.40 </Badge> <Badge variant="secondary" className="text-xs"> Intermittent </Badge> </div> <p className="text-muted-foreground text-xs"> Onset: <span className="text-foreground font-medium">June 2015</span> · Bronchodilator PRN · No hospitalizations in past 12m </p> </div> <div className="text-left sm:text-right"> <span className="text-muted-foreground block text-xs">Diagnosed by</span> <span className="text-foreground text-xs font-medium">Dr. Marcus Vance, MD</span> </div> </div> </CardContent> </Card> {/* Active Medications Table */} <Card> <CardHeader className="flex-row items-center justify-between space-y-0 pb-3"> <div> <CardTitle className="flex items-center gap-2 text-base font-semibold"> <Pill className="text-primary size-4" /> Active Medications Table </CardTitle> <CardDescription className="text-xs"> Current inpatient and outpatient pharmacotherapy regimen </CardDescription> </div> <Badge variant="secondary" className="text-xs font-normal"> 4 Prescriptions </Badge> </CardHeader> <CardContent> <div className="border-border overflow-x-auto rounded-lg border"> <Table> <TableHeader> <TableRow> <TableHead className="text-xs">Medication & Brand</TableHead> <TableHead className="text-xs">Dosage & Route</TableHead> <TableHead className="hidden text-xs md:table-cell">Instructions</TableHead> <TableHead className="text-xs">Prescribed By</TableHead> <TableHead className="text-right text-xs">Status</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell> <div className="text-foreground text-sm font-medium">Metformin HCl</div> <div className="text-muted-foreground text-xs">Glucophage · Biguanide</div> </TableCell> <TableCell className="text-foreground font-mono text-xs font-medium">500mg PO BID</TableCell> <TableCell className="text-muted-foreground hidden text-xs md:table-cell"> Take with morning & evening meals </TableCell> <TableCell className="text-foreground text-xs">Dr. Emily Vance, MD</TableCell> <TableCell className="text-right"> <Badge variant="default" className="text-xs font-medium"> Active </Badge> </TableCell> </TableRow> <TableRow> <TableCell> <div className="text-foreground text-sm font-medium">Lisinopril</div> <div className="text-muted-foreground text-xs">Prinivil · ACE Inhibitor</div> </TableCell> <TableCell className="text-foreground font-mono text-xs font-medium">10mg PO Daily</TableCell> <TableCell className="text-muted-foreground hidden text-xs md:table-cell"> Take once daily in morning with water </TableCell> <TableCell className="text-foreground text-xs">Dr. Emily Vance, MD</TableCell> <TableCell className="text-right"> <Badge variant="default" className="text-xs font-medium"> Active </Badge> </TableCell> </TableRow> <TableRow> <TableCell> <div className="text-foreground text-sm font-medium">Albuterol Sulfate</div> <div className="text-muted-foreground text-xs">ProAir HFA · SABA</div> </TableCell> <TableCell className="text-foreground font-mono text-xs font-medium"> 90mcg Inhalation Q4H PRN </TableCell> <TableCell className="text-muted-foreground hidden text-xs md:table-cell"> 1–2 puffs every 4–6 hrs as needed </TableCell> <TableCell className="text-foreground text-xs">Dr. Emily Vance, MD</TableCell> <TableCell className="text-right"> <Badge variant="default" className="text-xs font-medium"> Active </Badge> </TableCell> </TableRow> <TableRow> <TableCell> <div className="text-foreground text-sm font-medium">Atorvastatin Calcium</div> <div className="text-muted-foreground text-xs">Lipitor · Statin</div> </TableCell> <TableCell className="text-foreground font-mono text-xs font-medium">20mg PO QHS</TableCell> <TableCell className="text-muted-foreground hidden text-xs md:table-cell"> Take once daily at bedtime </TableCell> <TableCell className="text-foreground text-xs">Dr. Marcus Vance, MD</TableCell> <TableCell className="text-right"> <Badge variant="default" className="text-xs font-medium"> Active </Badge> </TableCell> </TableRow> </TableBody> </Table> </div> </CardContent> </Card> {/* Recent Clinical Encounter Notes */} <Card> <CardHeader className="pb-3"> <div className="flex flex-wrap items-center justify-between gap-2"> <div> <CardTitle className="flex items-center gap-2 text-base font-semibold"> <FileText className="text-primary size-4" /> Recent Clinical Encounter Notes </CardTitle> <CardDescription className="text-xs"> Inpatient Daily Progress Note · General Internal Medicine </CardDescription> </div> <Badge variant="outline" className="font-mono text-xs"> Encounter #ENC-91823 </Badge> </div> </CardHeader> <CardContent className="space-y-4"> <div className="bg-muted/30 border-border flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 text-xs"> <div className="flex items-center gap-2"> <span className="text-muted-foreground">Provider:</span> <span className="text-foreground font-medium">Dr. Emily Vance, MD (Attending)</span> </div> <div className="flex items-center gap-2"> <span className="text-muted-foreground">Date:</span> <span className="text-foreground font-medium tabular-nums">Oct 24, 2026 · 09:30 AM EDT</span> </div> </div> {/* History of Present Illness */} <div className="space-y-2"> <h4 className="text-muted-foreground flex items-center gap-1.5 text-xs font-semibold tracking-wider uppercase"> <span className="bg-primary size-1.5 rounded-full" /> History of Present Illness (HPI) </h4> <div className="border-border bg-card text-foreground/90 space-y-2 rounded-lg border p-3.5 text-sm leading-relaxed"> <p> Patient is a 48-year-old male with a documented history of Type 2 Diabetes Mellitus and Essential Hypertension, currently admitted to Inpatient Floor 4 East (Room 412B) for glycemic optimization following mild erratic home glucose readings. </p> <p> This morning, patient reports feeling well with notable improvement in energy levels. Denies episodes of dizziness, diaphoresis, chest pain, palpitations, or acute dyspnea. Fasting blood glucose at 07:00 was 118 mg/dL on Metformin 500mg BID. Vital signs remain within normal physiological parameters. Tolerating scheduled diabetic meal plan without gastrointestinal distress. </p> </div> </div> {/* Assessment & Plan */} <div className="space-y-2"> <h4 className="text-muted-foreground flex items-center gap-1.5 text-xs font-semibold tracking-wider uppercase"> <span className="bg-primary size-1.5 rounded-full" /> Assessment & Plan (A&P) </h4> <div className="border-border bg-card text-foreground/90 space-y-3 rounded-lg border p-3.5 text-sm leading-relaxed"> <div> <div className="text-foreground text-xs font-semibold tracking-wide uppercase"> 1. Type 2 Diabetes Mellitus (E11.9) — Controlled </div> <p className="text-muted-foreground mt-0.5 text-xs sm:text-sm"> Glycemic control stabilized. Continue Metformin HCl 500mg PO BID with meals. Re-check fasting blood sugar tomorrow at 07:00. HbA1c stable at 7.2%. No need for supplementary sliding-scale insulin at this time. </p> </div> <Separator /> <div> <div className="text-foreground text-xs font-semibold tracking-wide uppercase"> 2. Essential Hypertension (I10) — Stable </div> <p className="text-muted-foreground mt-0.5 text-xs sm:text-sm"> Normotensive on Lisinopril 10mg PO Daily (today BP 124/82 mmHg). Maintain current dosage. Continue routine Q8H vital signs monitoring. </p> </div> <Separator /> <div> <div className="text-foreground text-xs font-semibold tracking-wide uppercase"> 3. Bronchial Asthma (J45.40) — Quiescent </div> <p className="text-muted-foreground mt-0.5 text-xs sm:text-sm"> Bilateral breath sounds clear to auscultation without wheeze or crackles. Continue Albuterol 90mcg MDI PRN. </p> </div> <Separator /> <div> <div className="text-foreground text-xs font-semibold tracking-wide uppercase"> 4. Disposition & Discharge Planning </div> <p className="text-muted-foreground mt-0.5 text-xs sm:text-sm"> Anticipate discharge tomorrow morning pending afternoon CMP and final attending evaluation. Outpatient follow-up with PCP in 2 weeks. </p> </div> </div> </div> {/* Signature block */} <div className="border-border text-muted-foreground flex flex-wrap items-center justify-between border-t pt-3 text-xs"> <div className="flex items-center gap-1.5"> <CheckCircle2 className="text-success size-4" /> <span> Electronically Signed by:{' '} <strong className="text-foreground font-medium">Dr. Emily Vance, MD</strong> </span> </div> <span className="tabular-nums">Signed: Oct 24, 2026 at 10:15 AM EDT</span> </div> </CardContent> </Card> </main> {/* Right Side Panel (35%) */} <aside className="space-y-6 lg:col-span-4"> {/* Upcoming Appointments & Labs schedule */} <Card> <CardHeader className="flex-row items-center justify-between space-y-0 pb-3"> <div> <CardTitle className="flex items-center gap-2 text-base font-semibold"> <Calendar className="text-primary size-4" /> Upcoming Schedule & Labs </CardTitle> <CardDescription className="text-xs">Pending orders and scheduled consultations</CardDescription> </div> </CardHeader> <CardContent className="space-y-3"> {/* Item 1: CMP */} <div className="border-border bg-muted/20 space-y-1.5 rounded-lg border p-3"> <div className="flex items-center justify-between gap-2"> <span className="text-foreground text-xs font-semibold">Comprehensive Metabolic Panel</span> <Badge variant="secondary" className="text-xs"> Today </Badge> </div> <div className="text-muted-foreground flex items-center gap-2 text-xs"> <Clock className="size-3.5" /> <span className="text-foreground font-medium tabular-nums">02:00 PM EDT</span> <span>· Main Clinical Lab</span> </div> <div className="text-muted-foreground text-xs">Order #LAB-4819 · Stat processing</div> </div> {/* Item 2: Echocardiogram */} <div className="border-border bg-muted/20 space-y-1.5 rounded-lg border p-3"> <div className="flex items-center justify-between gap-2"> <span className="text-foreground text-xs font-semibold">Transthoracic Echocardiogram</span> <Badge variant="outline" className="text-xs"> Tomorrow </Badge> </div> <div className="text-muted-foreground flex items-center gap-2 text-xs"> <Clock className="size-3.5" /> <span className="text-foreground font-medium tabular-nums">10:30 AM EDT</span> <span>· Cardiology Suite 2B</span> </div> <div className="text-muted-foreground text-xs">Non-invasive Doppler evaluation</div> </div> {/* Item 3: Endo consult */} <div className="border-border bg-muted/20 space-y-1.5 rounded-lg border p-3"> <div className="flex items-center justify-between gap-2"> <span className="text-foreground text-xs font-semibold">Endocrinology Follow-Up</span> <Badge variant="outline" className="text-xs"> Nov 02 </Badge> </div> <div className="text-muted-foreground flex items-center gap-2 text-xs"> <Clock className="size-3.5" /> <span className="text-foreground font-medium tabular-nums">11:00 AM EDT</span> <span>· Outpatient Clinic Rm 304</span> </div> <div className="text-muted-foreground text-xs">Dr. Robert Chen, MD · Glycemic review</div> </div> </CardContent> </Card> {/* Care Team Contact list */} <Card> <CardHeader className="pb-3"> <CardTitle className="flex items-center gap-2 text-base font-semibold"> <UserCheck className="text-primary size-4" /> Care Team Directory </CardTitle> <CardDescription className="text-xs"> Assigned inpatient clinical providers </CardDescription> </CardHeader> <CardContent className="space-y-3.5"> {/* Doctor */} <div className="flex items-center justify-between gap-3"> <div className="flex min-w-0 items-center gap-3"> <Avatar className="size-9"> <AvatarFallback className="bg-primary/10 text-primary text-xs font-semibold">EV</AvatarFallback> </Avatar> <div className="min-w-0"> <div className="text-foreground truncate text-sm font-semibold">Dr. Emily Vance, MD</div> <div className="text-muted-foreground truncate text-xs">Attending Physician · Internal Med</div> </div> </div> <Badge variant="secondary" className="shrink-0 font-mono text-xs"> ext. 2940 </Badge> </div> <Separator /> {/* Nurse */} <div className="flex items-center justify-between gap-3"> <div className="flex min-w-0 items-center gap-3"> <Avatar className="size-9"> <AvatarFallback className="bg-primary/10 text-primary text-xs font-semibold">JM</AvatarFallback> </Avatar> <div className="min-w-0"> <div className="text-foreground truncate text-sm font-semibold">Jason Miller, BSN, RN</div> <div className="text-muted-foreground truncate text-xs">Charge Nurse · Floor 4 East</div> </div> </div> <Badge variant="secondary" className="shrink-0 font-mono text-xs"> ext. 4802 </Badge> </div> <Separator /> {/* Pharmacist */} <div className="flex items-center justify-between gap-3"> <div className="flex min-w-0 items-center gap-3"> <Avatar className="size-9"> <AvatarFallback className="bg-primary/10 text-primary text-xs font-semibold">SL</AvatarFallback> </Avatar> <div className="min-w-0"> <div className="text-foreground truncate text-sm font-semibold">Sarah Lin, PharmD</div> <div className="text-muted-foreground truncate text-xs">Clinical Pharmacist · Inpatient</div> </div> </div> <Badge variant="secondary" className="shrink-0 font-mono text-xs"> ext. 3319 </Badge> </div> </CardContent> </Card> {/* Emergency Contact card */} <Card> <CardHeader className="flex-row items-center justify-between space-y-0 pb-3"> <div> <CardTitle className="flex items-center gap-2 text-base font-semibold"> <Phone className="text-primary size-4" /> Emergency Contact </CardTitle> <CardDescription className="text-xs"> Designated healthcare surrogate </CardDescription> </div> <Badge variant="secondary" className="text-xs font-medium"> Primary </Badge> </CardHeader> <CardContent className="space-y-3 text-xs"> <div className="space-y-1"> <div className="text-foreground text-sm font-semibold">Elena Chen</div> <div className="text-muted-foreground text-xs">Spouse · Full Medical Power of Attorney</div> </div> <Separator /> <div className="text-muted-foreground space-y-2"> <div className="flex items-center justify-between gap-2"> <span className="text-foreground flex items-center gap-1.5 font-medium"> <Phone className="text-primary size-3.5" /> Primary Mobile </span> <span className="text-foreground font-mono font-medium tabular-nums">+1 (555) 234-8901</span> </div> <div className="flex items-center justify-between gap-2"> <span className="flex items-center gap-1.5"> <Phone className="size-3.5" /> Secondary Work </span> <span className="font-mono tabular-nums">+1 (555) 234-8902</span> </div> <div className="flex items-start justify-between gap-2 pt-1"> <span className="flex shrink-0 items-center gap-1.5"> <MapPin className="size-3.5" /> Home </span> <span className="text-foreground text-right">742 Evergreen Terrace, Seattle, WA 98101</span> </div> </div> <Separator /> <Button variant="outline" size="sm" className="w-full justify-center gap-1.5 text-xs font-medium"> <Phone className="size-3.5" /> Call Emergency Contact </Button> </CardContent> </Card> </aside> </div> </div> ) }
Raw manifest:https://uipkge.dev/r/react/patient-medical-record.json