Initial commit - WhyRating Engine (Google Reviews Scraper)

web/components/taxonomy/SubcodeDetail.tsx

@@ -0,0 +1,98 @@
+'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&apos;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>
+  );
+}