82 lines
3.3 KiB
TypeScript
82 lines
3.3 KiB
TypeScript
|
|
import React from 'react';
|
|
import { CreditCard, ShieldCheck, RefreshCcw, Cpu, LucideIcon, CheckCircle2 } from 'lucide-react';
|
|
import { Section } from '../types';
|
|
|
|
const IconMap: Record<string, LucideIcon> = {
|
|
CreditCard,
|
|
ShieldCheck,
|
|
RefreshCcw,
|
|
Cpu,
|
|
};
|
|
|
|
interface SectionCardProps {
|
|
section: Section;
|
|
}
|
|
|
|
const SectionCard: React.FC<SectionCardProps> = ({ section }) => {
|
|
const Icon = IconMap[section.icon] || Cpu;
|
|
|
|
const getPriorityColor = (priority: string) => {
|
|
switch (priority) {
|
|
case 'high': return 'border-l-4 border-l-rose-500';
|
|
case 'medium': return 'border-l-4 border-l-amber-500';
|
|
default: return 'border-l-4 border-l-slate-300';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section id={section.id} className="scroll-mt-24">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className={`p-2 rounded-lg ${section.id === 'cost' ? 'bg-blue-100 text-blue-600' : section.id === 'legal' ? 'bg-emerald-100 text-emerald-600' : section.id === 'continuity' ? 'bg-amber-100 text-amber-600' : 'bg-slate-100 text-slate-600'}`}>
|
|
<Icon className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-slate-800">{section.title}</h3>
|
|
<p className="text-xs text-slate-400 font-medium tracking-wide uppercase">{section.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3">
|
|
{section.questions.map((q, idx) => (
|
|
<div
|
|
key={q.id}
|
|
className={`group bg-white rounded-xl border border-slate-200 p-5 shadow-sm hover:shadow-md hover:border-indigo-200 transition-all ${getPriorityColor(q.priority)}`}
|
|
>
|
|
<div className="flex gap-4">
|
|
<div className="shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-slate-50 text-[10px] font-bold text-slate-400 border border-slate-100 group-hover:bg-indigo-50 group-hover:text-indigo-500 group-hover:border-indigo-100 transition-colors">
|
|
{idx + 1}
|
|
</div>
|
|
<div className="space-y-2 flex-1">
|
|
<p className="text-slate-700 leading-relaxed font-medium">
|
|
{q.text.split(':').length > 1 ? (
|
|
<>
|
|
<span className="text-slate-900 font-bold underline decoration-indigo-200 underline-offset-4">{q.text.split(':')[0]}:</span>
|
|
{q.text.split(':')[1]}
|
|
</>
|
|
) : q.text}
|
|
</p>
|
|
<div className="flex items-center gap-4 pt-1">
|
|
{q.priority === 'high' && (
|
|
<span className="flex items-center gap-1 text-[10px] font-bold bg-rose-50 text-rose-600 px-2 py-0.5 rounded-full uppercase tracking-tight">
|
|
Essential
|
|
</span>
|
|
)}
|
|
<div className="flex gap-2">
|
|
<button className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-emerald-600 transition-colors">
|
|
<CheckCircle2 className="w-3.5 h-3.5" />
|
|
확인완료
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SectionCard;
|