32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
import AlertCircleIcon from "@/assets/icons/alert-circle.svg?react";
|
|
import type { DiagnosisItem } from "@/features/report/types/diagnosis";
|
|
import { problemDiagnosisSeverityDotClass } from "@/features/report/ui/diagnosis/severityDotClass";
|
|
|
|
export type ProblemDiagnosisCardProps = {
|
|
item: DiagnosisItem;
|
|
index: number;
|
|
};
|
|
|
|
export function ProblemDiagnosisCard({ item, index }: ProblemDiagnosisCardProps) {
|
|
return (
|
|
<article
|
|
className="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl p-6 relative overflow-hidden card-shadow animate-fade-in-up"
|
|
style={{ animationDelay: `${index * 80}ms` }}
|
|
>
|
|
<div className="absolute top-4 right-4" aria-hidden>
|
|
<span className={`block w-3 h-3 rounded-full ${problemDiagnosisSeverityDotClass(item.severity)}`} />
|
|
</div>
|
|
|
|
<div className="flex items-start gap-3 pr-6">
|
|
<div className="shrink-0 w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center mt-0.5 [&_svg]:block">
|
|
<AlertCircleIcon width={16} height={16} className="text-lavender-200" aria-hidden />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="title-18 text-white mb-2 break-keep">{item.category}</p>
|
|
<p className="body-14 text-lavender-200 leading-relaxed break-keep">{item.detail}</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|