48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { Dialog } from "@kobalte/core/dialog"
|
|
|
|
interface InstanceDisconnectedModalProps {
|
|
open: boolean
|
|
folder?: string
|
|
reason?: string
|
|
onClose: () => void
|
|
}
|
|
|
|
export default function InstanceDisconnectedModal(props: InstanceDisconnectedModalProps) {
|
|
const folderLabel = props.folder || "this workspace"
|
|
const reasonLabel = props.reason || "The server stopped responding"
|
|
|
|
return (
|
|
<Dialog open={props.open} modal>
|
|
<Dialog.Portal>
|
|
<Dialog.Overlay class="modal-overlay" />
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
|
|
<div>
|
|
<Dialog.Title class="text-xl font-semibold text-primary">Instance Disconnected</Dialog.Title>
|
|
<Dialog.Description class="text-sm text-secondary mt-2">
|
|
{folderLabel} can no longer be reached. Close the tab to continue working.
|
|
</Dialog.Description>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-base bg-surface-secondary p-4 text-sm text-secondary">
|
|
<p class="font-medium text-primary">Details</p>
|
|
<p class="mt-2 text-secondary">{reasonLabel}</p>
|
|
{props.folder && (
|
|
<p class="mt-2 text-secondary">
|
|
Folder: <span class="font-mono text-primary break-all">{props.folder}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="button" class="selector-button selector-button-primary" onClick={props.onClose}>
|
|
Close Instance
|
|
</button>
|
|
</div>
|
|
</Dialog.Content>
|
|
</div>
|
|
</Dialog.Portal>
|
|
</Dialog>
|
|
)
|
|
}
|