84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { glasgowScale, getGlasgowInterpretation } from '@/data/calculators';
|
||
|
|
import Badge from '@/components/shared/Badge';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
const GlasgowCalculator = () => {
|
||
|
|
const [scores, setScores] = useState<Record<string, number>>({
|
||
|
|
'Apertura Ocular': 4,
|
||
|
|
'Respuesta Verbal': 5,
|
||
|
|
'Respuesta Motora': 6,
|
||
|
|
});
|
||
|
|
|
||
|
|
const totalScore = Object.values(scores).reduce((sum, score) => sum + score, 0);
|
||
|
|
const interpretation = getGlasgowInterpretation(totalScore);
|
||
|
|
|
||
|
|
const handleScoreChange = (category: string, value: number) => {
|
||
|
|
setScores((prev) => ({ ...prev, [category]: value }));
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="card-procedure">
|
||
|
|
<h3 className="font-bold text-foreground text-lg mb-4">
|
||
|
|
🧠 Escala de Glasgow (GCS)
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div className="space-y-6">
|
||
|
|
{glasgowScale.map((category) => (
|
||
|
|
<div key={category.name}>
|
||
|
|
<div className="flex items-center justify-between mb-2">
|
||
|
|
<h4 className="font-semibold text-foreground">{category.name}</h4>
|
||
|
|
<span className="text-xl font-bold text-primary">
|
||
|
|
{scores[category.name]}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{category.options.map((option) => (
|
||
|
|
<button
|
||
|
|
key={option.value}
|
||
|
|
onClick={() => handleScoreChange(category.name, option.value)}
|
||
|
|
className={cn(
|
||
|
|
'w-full flex items-center justify-between p-3 rounded-lg border transition-colors text-left',
|
||
|
|
scores[category.name] === option.value
|
||
|
|
? 'bg-primary/10 border-primary text-foreground'
|
||
|
|
: 'bg-muted border-border text-muted-foreground hover:border-primary/50'
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<span className="text-sm">{option.label}</span>
|
||
|
|
<span className="font-bold">{option.value}</span>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-6 p-4 bg-card border-2 border-primary rounded-xl text-center">
|
||
|
|
<p className="text-muted-foreground text-sm mb-1">Puntuación Total</p>
|
||
|
|
<p className="text-5xl font-bold text-foreground mb-2">{totalScore}</p>
|
||
|
|
<Badge
|
||
|
|
variant={
|
||
|
|
interpretation.color === 'critical'
|
||
|
|
? 'critical'
|
||
|
|
: interpretation.color === 'high'
|
||
|
|
? 'high'
|
||
|
|
: 'low'
|
||
|
|
}
|
||
|
|
className="text-sm px-3 py-1"
|
||
|
|
>
|
||
|
|
{interpretation.severity}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-4 text-center text-sm text-muted-foreground">
|
||
|
|
<p>Rango: 3 (mínimo) - 15 (máximo)</p>
|
||
|
|
<p className="mt-1">
|
||
|
|
≤8: Grave (IOT) | 9-12: Moderado | 13-15: Leve
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default GlasgowCalculator;
|