1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / smartweb / priyoholidays.com / src / components / pages / make-your-trip /
Filename : TripForm.jsx
back
import PrimaryButton from '@/components/buttons/PrimaryButton'
import Input from '@/components/common/Input'
import Select from '@/components/common/Select'
import React from 'react'
import { FaTimes } from 'react-icons/fa'
import { GrSend } from 'react-icons/gr'

export default function TripForm({ removable = false }) {
    return (
        <div className='flex gap-4 flex-col justify-center items-center border rounded-md p-3'>
            <div className='grid grid-cols-1 md:grid-cols-6 justify-center items-end flex-col md:flex-row w-full gap-4'>
                <Select
                    baseClasses={'md:col-span-4'}
                    title='Country'
                    name='country'
                    placeholder='Select Country'
                    required
                    options={[
                        { value: 'nepal', label: 'Nepal' },
                        { value: 'usa', label: 'USA' },
                        { value: 'uk', label: 'UK' },
                    ]}
                />
                <button
                    type='button'
                    className='bg-red-600 hover:bg-red-700 transition-colors duration-300 cursor-pointer disabled:bg-gray-500 disabled:hover:bg-gray-600 disabled:cursor-not-allowed text-white py-3 px-4 rounded-md md:col-span-2'
                    disabled={!removable}>
                    Remove Country
                </button>
            </div>
            {/* Hotel */}
            <div className='flex gap-4 flex-col justify-center items-center my-2 w-full'>
                <div className='grid grid-cols-1 md:grid-cols-3 justify-center items-center gap-4 w-full border rounded-md p-3'>
                    <Select
                        title='Hotel City'
                        name='hotel_city'
                        placeholder='Select Hotel City'
                        required
                        options={[
                            { value: 'nepal', label: 'Nepal' },
                            { value: 'usa', label: 'USA' },
                            { value: 'uk', label: 'UK' },
                        ]}
                    />
                    <Select
                        title='Hotel Type'
                        name='hotel_type'
                        placeholder='Select Hotel Type'
                        required
                        options={[
                            { value: 'nepal', label: 'Nepal' },
                            { value: 'usa', label: 'USA' },
                            { value: 'uk', label: 'UK' },
                        ]}
                    />
                    <div className='flex justify-center items-end gap-2'>
                        <Input title='Hotel Price' name='fname' type='number' placeholder='Hotel Price' required />
                        <button
                            type='button'
                            className='bg-red-600 hover:bg-red-700 transition-colors duration-300 cursor-pointer disabled:bg-gray-500 disabled:hover:bg-gray-600 disabled:cursor-not-allowed text-white py-4 px-4 rounded-md'
                            disabled>
                            <FaTimes />
                        </button>
                    </div>
                </div>
                <div className='w-full flex sm:justify-start justify-center items-center'>
                    <PrimaryButton type='button' noIcon={true} className='text-sm px-8 py-3 rounded-lg before:rounded-lg'>
                        Add Hotel
                    </PrimaryButton>
                </div>
            </div>
            {/* Hotel ^^^ */}
            {/* City Tour */}
            <div className='flex gap-4 flex-col justify-center items-center my-2 w-full'>
                <div className='grid grid-cols-1 md:grid-cols-3 justify-center items-center gap-4 w-full border rounded-md p-3'>
                    <Select
                        title='City Tour / Sight sign'
                        name='sight_sign'
                        placeholder='Select City Tour / Sight sign'
                        required
                        options={[
                            { value: 'nepal', label: 'Nepal' },
                            { value: 'usa', label: 'USA' },
                            { value: 'uk', label: 'UK' },
                        ]}
                    />
                    <Select
                        title='City Tour'
                        name='city_tour'
                        placeholder='Select City Tour'
                        required
                        options={[
                            { value: 'nepal', label: 'Nepal' },
                            { value: 'usa', label: 'USA' },
                            { value: 'uk', label: 'UK' },
                        ]}
                    />
                    <div className='flex justify-center items-end gap-2'>
                        <Input title='Sight Price' name='fname' type='number' placeholder='Sight Price' required />
                        <button
                            type='button'
                            className='bg-red-600 hover:bg-red-700 transition-colors duration-300 cursor-pointer disabled:bg-gray-500 disabled:hover:bg-gray-600 disabled:cursor-not-allowed text-white py-4 px-4 rounded-md'
                            disabled>
                            <FaTimes />
                        </button>
                    </div>
                </div>
                <div className='w-full flex sm:justify-start justify-center items-center'>
                    <PrimaryButton type='button' noIcon={true} className='text-sm px-8 py-3 rounded-lg before:rounded-lg'>
                        Add City
                    </PrimaryButton>
                </div>
            </div>
            {/* City Tour ^^^ */}
            <div className='grid grid-cols-1 sm:grid-cols-4 justify-start items-center w-full gap-3'>
                <p className='font-bold'>Airports Transfer</p>
                <div className='flex justify-start items-center gap-4 w-full sm:col-span-3'>
                    <div className='flex justify-center items-center gap-2'>
                        <input type='checkbox' name='airport_transfer' className='w-6 aspect-square cursor-pointer' value='pick' />
                        <label>Pick</label>
                    </div>
                    <div className='flex justify-center items-center gap-2'>
                        <input type='checkbox' name='airport_transfer' className='w-6 aspect-square cursor-pointer' value='drop' />
                        <label>Drop</label>
                    </div>
                </div>
            </div>
            <div className='grid grid-cols-1 sm:grid-cols-4 justify-start items-center w-full gap-3'>
                <p className='font-bold'>Food</p>
                <div className='flex justify-start items-center gap-4 w-full sm:col-span-3'>
                    <div className='flex justify-center items-center gap-2'>
                        <input type='checkbox' name='food' className='w-6 aspect-square cursor-pointer' value='breakfast' />
                        <label>Breakfast</label>
                    </div>
                    <div className='flex justify-center items-center gap-2'>
                        <input type='checkbox' name='food' className='w-6 aspect-square cursor-pointer' value='lunch' />
                        <label>Lunch</label>
                    </div>
                    <div className='flex justify-center items-center gap-2'>
                        <input type='checkbox' name='food' className='w-6 aspect-square cursor-pointer' value='dinner' />
                        <label>Dinner</label>
                    </div>
                </div>
            </div>
            <div className='grid grid-cols-1 sm:grid-cols-4 justify-start items-center w-full gap-3'>
                <p className='font-bold'>Duration</p>
                <div className='flex justify-start items-center gap-4 w-full sm:col-span-3'>
                    <Select
                        name='duration'
                        placeholder='Select Duration'
                        required
                        options={[
                            { value: '2d3n', label: '2 Day 3 Night' },
                            { value: '3d2n', label: '3 Day 2 Night' },
                            { value: '4d3n', label: '4 Day 3 Night' },
                            { value: '4d5n', label: '4 Day 5 Night' },
                        ]}
                    />
                </div>
            </div>
            {/* City Transfer */}
            <div className='flex gap-4 flex-col justify-center items-center my-2 w-full'>
                <div className='grid grid-cols-1 md:grid-cols-3 justify-center items-center gap-4 w-full border rounded-md p-3'>
                    <Select
                        title='City Transfer'
                        name='city_transfer'
                        placeholder='Select City Transfer'
                        required
                        options={[
                            { value: 'nepal', label: 'Nepal' },
                            { value: 'usa', label: 'USA' },
                            { value: 'uk', label: 'UK' },
                        ]}
                    />
                    <Input title='Transfer Name' name='fname' type='text' placeholder='Transfer Name' required />
                    <div className='flex justify-center items-end gap-2'>
                        <Input title='Transfer Price' name='fname' type='number' placeholder='Transfer Price' required />
                        <button
                            type='button'
                            className='bg-red-600 hover:bg-red-700 transition-colors duration-300 cursor-pointer disabled:bg-gray-500 disabled:hover:bg-gray-600 disabled:cursor-not-allowed text-white py-4 px-4 rounded-md'
                            disabled>
                            <FaTimes />
                        </button>
                    </div>
                </div>
                <div className='w-full flex sm:justify-start justify-center items-center'>
                    <PrimaryButton type='button' noIcon={true} className='text-sm px-8 py-3 rounded-lg before:rounded-lg'>
                        Add Transfer
                    </PrimaryButton>
                </div>
            </div>
            {/* City Transfer ^^^ */}
        </div>
    )
}