first commit
This commit is contained in:
Samandar Turgunboyev
287
src/pages/tours/ui/StepTwo.tsx
Normal file
287
src/pages/tours/ui/StepTwo.tsx
Normal file
@@ -0,0 +1,287 @@
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormMessage,
|
||||
} from "@/shared/ui/form";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Label } from "@/shared/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import z from "zod";
|
||||
|
||||
const formSchema = z.object({
|
||||
title: z.string().min(2, {
|
||||
message: "Sarlavha kamida 2 ta belgidan iborat bo‘lishi kerak.",
|
||||
}),
|
||||
rating: z.number(),
|
||||
mealPlan: z.string().min(1, { message: "Taom rejasi tanlanishi majburiy" }),
|
||||
hotelType: z
|
||||
.string()
|
||||
.min(1, { message: "Mehmonxona turi tanlanishi majburiy" }),
|
||||
hotelFeatures: z
|
||||
.array(z.string())
|
||||
.min(1, { message: "Kamida 1 ta xususiyat tanlanishi kerak" }),
|
||||
});
|
||||
|
||||
const StepTwo = ({
|
||||
setStep,
|
||||
}: {
|
||||
setStep: Dispatch<SetStateAction<number>>;
|
||||
}) => {
|
||||
const navigator = useNavigate();
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
title: "",
|
||||
rating: 3.0,
|
||||
mealPlan: "",
|
||||
hotelType: "",
|
||||
hotelFeatures: [],
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit() {
|
||||
navigator("tours");
|
||||
}
|
||||
|
||||
const mealPlans = [
|
||||
"Breakfast Only",
|
||||
"Half Board",
|
||||
"Full Board",
|
||||
"All Inclusive",
|
||||
];
|
||||
const hotelTypes = ["Hotel", "Resort", "Guest House", "Apartment"];
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4 max-lg:grid-cols-1 items-start">
|
||||
{/* Mehmonxona nomi */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label className="text-md">Mehmonxona nomi</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Toshkent - Dubay"
|
||||
{...field}
|
||||
className="h-12 !text-md"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Mehmonxona rating */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rating"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label className="text-md">Mehmonxona raytingi</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="3.0"
|
||||
{...field}
|
||||
className="h-12 !text-md"
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
if (/^\d*\.?\d*$/.test(val)) {
|
||||
field.onChange(val);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Meal Plan */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="mealPlan"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<Label className="text-md">Meal Plan</Label>
|
||||
<FormControl>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="mealPlan"
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
>
|
||||
<SelectTrigger className="!h-12 w-full">
|
||||
<SelectValue placeholder="Taom rejasini tanlang" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{mealPlans.map((plan) => (
|
||||
<SelectItem key={plan} value={plan}>
|
||||
{plan}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Hotel Type */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="hotelType"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<Label className="text-md">Mehmonxona turi</Label>
|
||||
<FormControl>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="hotelType"
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
>
|
||||
<SelectTrigger className="!h-12 w-full">
|
||||
<SelectValue placeholder="Mehmonxona turini tanlang" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{hotelTypes.map((type) => (
|
||||
<SelectItem key={type} value={type}>
|
||||
{type}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* <FormField
|
||||
control={form.control}
|
||||
name="hotelFeatures"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<Label className="text-md">Mehmonxona qulayliklar</Label>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{form.watch("amenities").map((item, idx) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const Icon =
|
||||
(LucideIcons as any)[item.icon_name] || XIcon;
|
||||
return (
|
||||
<Badge
|
||||
key={idx}
|
||||
variant="secondary"
|
||||
className="px-3 py-1 text-sm flex items-center gap-2"
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
<span>{item.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const current = form.getValues("amenities");
|
||||
form.setValue(
|
||||
"amenities",
|
||||
current.filter((_, i: number) => i !== idx),
|
||||
);
|
||||
}}
|
||||
className="ml-1 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
</button>
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<IconSelect
|
||||
setSelectedIcon={setSelectedIcon}
|
||||
selectedIcon={selectedIcon}
|
||||
/>
|
||||
|
||||
<Input
|
||||
id="amenity_name"
|
||||
placeholder="Qulaylik nomi (masalan: Wi-Fi)"
|
||||
className="h-12 !text-md flex-1"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const nameInput = document.getElementById(
|
||||
"amenity_name",
|
||||
) as HTMLInputElement;
|
||||
|
||||
if (selectedIcon && nameInput.value) {
|
||||
const current = form.getValues("amenities");
|
||||
form.setValue("amenities", [
|
||||
...current,
|
||||
{
|
||||
icon_name: selectedIcon,
|
||||
name: nameInput.value,
|
||||
},
|
||||
]);
|
||||
nameInput.value = "";
|
||||
setSelectedIcon("");
|
||||
}
|
||||
}}
|
||||
className="h-12"
|
||||
>
|
||||
Qo‘shish
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/> */}
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStep(1)}
|
||||
className="mt-6 px-6 py-3 bg-gray-600 text-white rounded-md"
|
||||
>
|
||||
Ortga
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-6 px-6 py-3 bg-blue-600 text-white rounded-md"
|
||||
>
|
||||
Saqlash
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepTwo;
|
||||
Reference in New Issue
Block a user