File size: 2,509 Bytes
2586888 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | import { Heart, TrendingUp } from "lucide-react";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";
interface AnalysisResult {
ejectionFraction: number;
heartFunction: "normal" | "mildly dysfunction" | "heart failure";
}
interface ResultsDisplayProps {
results: AnalysisResult;
}
const getStatusClass = (status: string) => {
switch (status) {
case "normal":
return "status-normal";
case "mildly dysfunction":
return "status-mild";
case "heart failure":
return "status-failure";
default:
return "";
}
};
const getStatusLabel = (status: string) => {
switch (status) {
case "normal":
return "Normal Function";
case "mildly dysfunction":
return "Mild Dysfunction";
case "heart failure":
return "Heart Failure";
default:
return status;
}
};
export const ResultsDisplay = ({ results }: ResultsDisplayProps) => {
return (
<div className="space-y-6 animate-fade-in">
{/* Heart Function Status */}
<Card className="glass-card p-6">
<div className="flex items-center gap-4">
<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
<Heart className="h-7 w-7 text-primary" />
</div>
<div className="flex-1">
<p className="text-sm text-muted-foreground">Heart Function Assessment</p>
<h3 className="font-display text-2xl font-bold">Cardiac Status</h3>
</div>
<div
className={cn(
"rounded-full border px-6 py-2 text-sm font-semibold",
getStatusClass(results.heartFunction)
)}
>
{getStatusLabel(results.heartFunction)}
</div>
</div>
</Card>
{/* Ejection Fraction */}
<Card className="glass-card p-6 ring-2 ring-primary/20">
<div className="flex items-center gap-4">
<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
<TrendingUp className="h-7 w-7 text-primary" />
</div>
<div className="flex-1">
<p className="text-sm text-muted-foreground">Ejection Fraction</p>
<p className="font-display text-3xl font-bold">
{results.ejectionFraction.toFixed(1)}
<span className="ml-1 text-lg font-normal text-muted-foreground">%</span>
</p>
</div>
</div>
</Card>
</div>
);
};
|