82 lines
3.4 KiB
TypeScript
82 lines
3.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { X, Map as MapIcon, Loader2 } from 'lucide-react';
|
|
import { useTourStore } from './useTourStore.js';
|
|
|
|
export const CreateTourModal = ({ isOpen, onClose, onSuccess }: { isOpen: boolean, onClose: () => void, onSuccess: (tour: any) => void }) => {
|
|
const [title, setTitle] = useState('');
|
|
const [startDate, setStartDate] = useState('');
|
|
const [endDate, setEndDate] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const createTour = useTourStore(state => state.createTour);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
try {
|
|
const tour = await createTour({ title, startDate, endDate });
|
|
onSuccess(tour);
|
|
onClose();
|
|
} catch (error) {
|
|
alert('Lỗi khi tạo tour');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
|
|
<div className="relative w-full max-w-md bg-white rounded-3xl shadow-2xl overflow-hidden p-8">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
|
|
<MapIcon className="w-6 h-6 text-blue-600" /> Tạo Tour mới
|
|
</h2>
|
|
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
|
|
<X className="w-6 h-6 text-gray-400" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-bold text-gray-700 mb-1">Tên Tour</label>
|
|
<input
|
|
required
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
|
|
value={title}
|
|
onChange={e => setTitle(e.target.value)}
|
|
placeholder="VD: Khám phá Đà Lạt"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-bold text-gray-700 mb-1">Bắt đầu</label>
|
|
<input
|
|
type="date"
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
|
|
value={startDate}
|
|
onChange={e => setStartDate(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-bold text-gray-700 mb-1">Kết thúc</label>
|
|
<input
|
|
type="date"
|
|
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500"
|
|
value={endDate}
|
|
onChange={e => setEndDate(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
disabled={isLoading}
|
|
className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2"
|
|
>
|
|
{isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Xác nhận tạo Tour'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |