126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
|
|
interface Props {
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
onCreate: (data: { name: string; description: string }) => void | Promise<void>
|
|
creating: boolean
|
|
error?: string
|
|
success?: string
|
|
clearMessages: () => void
|
|
}
|
|
|
|
export default function CreateNewPoolModal({
|
|
isOpen,
|
|
onClose,
|
|
onCreate,
|
|
creating,
|
|
error,
|
|
success,
|
|
clearMessages
|
|
}: Props) {
|
|
const [name, setName] = React.useState('')
|
|
const [description, setDescription] = React.useState('')
|
|
|
|
React.useEffect(() => {
|
|
if (!isOpen) {
|
|
setName('')
|
|
setDescription('')
|
|
}
|
|
}, [isOpen])
|
|
|
|
if (!isOpen) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
{/* Overlay */}
|
|
<div
|
|
className="absolute inset-0 bg-black/40 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
/>
|
|
{/* Modal */}
|
|
<div className="relative w-full max-w-lg mx-4 rounded-2xl bg-white shadow-xl border border-blue-100 p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold text-blue-900">Create New Pool</h2>
|
|
<button
|
|
onClick={() => { clearMessages(); onClose(); }}
|
|
className="text-gray-500 hover:text-gray-700 transition text-sm"
|
|
aria-label="Close"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
{success && (
|
|
<div className="mb-4 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700">
|
|
{success}
|
|
</div>
|
|
)}
|
|
{error && (
|
|
<div className="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form
|
|
onSubmit={e => {
|
|
e.preventDefault()
|
|
clearMessages()
|
|
onCreate({ name, description })
|
|
}}
|
|
className="space-y-4"
|
|
>
|
|
<div>
|
|
<label className="block text-sm font-medium text-blue-900 mb-1">Pool Name</label>
|
|
<input
|
|
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm bg-gray-50 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
|
|
placeholder="e.g., VIP Members"
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
disabled={creating}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-blue-900 mb-1">Description</label>
|
|
<textarea
|
|
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm bg-gray-50 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
|
|
rows={3}
|
|
placeholder="Short description of the pool"
|
|
value={description}
|
|
onChange={e => setDescription(e.target.value)}
|
|
disabled={creating}
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="submit"
|
|
disabled={creating}
|
|
className="px-5 py-3 text-sm font-semibold text-blue-50 rounded-lg bg-blue-900 hover:bg-blue-800 shadow inline-flex items-center gap-2 disabled:opacity-60"
|
|
>
|
|
{creating && <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />}
|
|
{creating ? 'Creating...' : 'Create Pool'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition"
|
|
onClick={() => { setName(''); setDescription(''); clearMessages(); }}
|
|
disabled={creating}
|
|
>
|
|
Reset
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ml-auto px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-800 transition"
|
|
onClick={() => { clearMessages(); onClose(); }}
|
|
disabled={creating}
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|