75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
'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>
|
|
)
|
|
}
|