manage conflict

2026-01-23 11:40:01 -03:00
parent 7cb37ff940
commit b861c51780
4 changed files with 1990 additions and 0 deletions
@@ -0,0 +1,74 @@
+'use client'
+
+export type ValidationIssue = {
+  nodeId: string
+  nodeType: 'dialogue' | 'choice' | 'variable' | 'edge'
+  contentSnippet: string
+  referenceType: 'character' | 'variable'
+  referenceId: string
+}
+
+type ExportValidationModalProps = {
+  issues: ValidationIssue[]
+  onExportAnyway: () => void
+  onCancel: () => void
+}
+
+export default function ExportValidationModal({
+  issues,
+  onExportAnyway,
+  onCancel,
+}: ExportValidationModalProps) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="mx-4 w-full max-w-lg rounded-lg bg-white shadow-xl dark:bg-zinc-800">
+        <div className="border-b border-zinc-200 px-6 py-4 dark:border-zinc-700">
+          <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+            Undefined References Found
+          </h2>
+          <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+            The following nodes reference characters or variables that are no longer defined.
+          </p>
+        </div>
+
+        <div className="max-h-[50vh] overflow-y-auto px-6 py-4">
+          <ul className="space-y-3">
+            {issues.map((issue, index) => (
+              <li
+                key={`${issue.nodeId}-${issue.referenceId}-${index}`}
+                className="rounded-md border border-orange-200 bg-orange-50 px-3 py-2 dark:border-orange-800 dark:bg-orange-950"
+              >
+                <div className="flex items-center gap-2">
+                  <span className="inline-flex items-center rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-medium text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300">
+                    {issue.nodeType}
+                  </span>
+                  <span className="inline-flex items-center rounded bg-orange-200 px-1.5 py-0.5 text-xs font-medium text-orange-800 dark:bg-orange-800 dark:text-orange-200">
+                    undefined {issue.referenceType}
+                  </span>
+                </div>
+                <p className="mt-1 truncate text-sm text-zinc-700 dark:text-zinc-300">
+                  {issue.contentSnippet}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="flex justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700">
+          <button
+            onClick={onCancel}
+            className="rounded border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onExportAnyway}
+            className="rounded bg-orange-500 px-4 py-2 text-sm font-medium text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
+          >
+            Export anyway
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}