51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { AlertCircle } from 'lucide-react';
|
|
import { SectionWrapper } from './ui/SectionWrapper';
|
|
import type { DiagnosisItem } from '../../types/report';
|
|
|
|
interface ProblemDiagnosisProps {
|
|
diagnosis: DiagnosisItem[];
|
|
}
|
|
|
|
const severityDot: Record<string, string> = {
|
|
critical: 'bg-[#C084CF]',
|
|
warning: 'bg-[#8B9CF7]',
|
|
good: 'bg-[#7C6DD8]',
|
|
excellent: 'bg-[#6C5CE7]',
|
|
unknown: 'bg-slate-400',
|
|
};
|
|
|
|
export default function ProblemDiagnosis({ diagnosis }: ProblemDiagnosisProps) {
|
|
return (
|
|
<SectionWrapper id="problem-diagnosis" title="Critical Issues" subtitle="핵심 문제 진단" dark>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{diagnosis.map((item, i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-6 relative overflow-hidden"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: i * 0.08 }}
|
|
>
|
|
{/* Severity dot */}
|
|
<div className="absolute top-4 right-4">
|
|
<span className={`block w-3 h-3 rounded-full ${severityDot[item.severity] ?? severityDot.unknown}`} />
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<div className="shrink-0 w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center mt-1">
|
|
<AlertCircle size={16} className="text-[#E8B4C0]" />
|
|
</div>
|
|
<div>
|
|
<p className="text-lg font-bold text-white mb-2">{item.category}</p>
|
|
<p className="text-sm text-purple-200 leading-relaxed">{item.detail}</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</SectionWrapper>
|
|
);
|
|
}
|