99 lines
3.7 KiB
TypeScript
99 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { CheckCircle, XCircle, AlertTriangle } from 'lucide-react';
|
|
import type { SelectedSubcode } from '@/lib/taxonomy/types';
|
|
import { DOMAIN_TEXT_COLORS, DOMAIN_BG_COLORS, DOMAIN_BORDER_COLORS } from '@/lib/taxonomy/types';
|
|
|
|
interface SubcodeDetailProps {
|
|
selectedSubcode: SelectedSubcode | null;
|
|
}
|
|
|
|
export default function SubcodeDetail({ selectedSubcode }: SubcodeDetailProps) {
|
|
if (!selectedSubcode) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full text-gray-500">
|
|
<div className="text-center">
|
|
<p className="text-lg">Select a subcode</p>
|
|
<p className="text-sm mt-1">Click on a subcode to view its details</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const { code, domainKey, domainName, categoryName, subcode } = selectedSubcode;
|
|
const textColor = DOMAIN_TEXT_COLORS[domainKey];
|
|
const bgColor = DOMAIN_BG_COLORS[domainKey];
|
|
const borderColor = DOMAIN_BORDER_COLORS[domainKey];
|
|
|
|
return (
|
|
<div className="flex flex-col h-full overflow-y-auto">
|
|
{/* Header */}
|
|
<div className={`p-4 border-b border-gray-700 ${bgColor}`}>
|
|
<h2 className={`text-xl font-bold ${textColor}`}>
|
|
{code} {subcode.name}
|
|
</h2>
|
|
<div className="flex gap-2 mt-2 text-sm text-gray-400">
|
|
<span>Domain: {domainName}</span>
|
|
<span className="text-gray-600">|</span>
|
|
<span>Category: {categoryName}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 p-4 space-y-6">
|
|
{/* Definition */}
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-2">
|
|
Definition
|
|
</h3>
|
|
<p className="text-gray-200">{subcode.definition}</p>
|
|
</section>
|
|
|
|
{/* Examples */}
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
|
Examples
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{/* Positive Example */}
|
|
<div className="flex items-start gap-3 p-3 rounded-lg bg-green-500/10 border border-green-500/20">
|
|
<CheckCircle className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<span className="text-xs text-green-400 uppercase font-medium">Positive</span>
|
|
<p className="text-gray-200 mt-0.5">{subcode.positive_example}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Negative Example */}
|
|
<div className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
|
|
<XCircle className="w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<span className="text-xs text-red-400 uppercase font-medium">Negative</span>
|
|
<p className="text-gray-200 mt-0.5">{subcode.negative_example}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Don't Confuse With */}
|
|
{subcode.dont_confuse_with && (
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
|
Don't Confuse With
|
|
</h3>
|
|
<div className={`flex items-start gap-3 p-3 rounded-lg border ${bgColor} ${borderColor}`}>
|
|
<AlertTriangle className="w-5 h-5 text-amber-400 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<span className={`font-mono font-medium ${textColor}`}>
|
|
{subcode.dont_confuse_with}
|
|
</span>
|
|
<p className="text-gray-300 mt-1 text-sm">{subcode.dont_confuse_reason}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|