AddOrderDilog

 avatar
unknown
tsx
2 years ago
2.4 kB
3
Indexable
import { Dialog } from '@material-tailwind/react'
import addicon from "@assets/addIcon.png"
import { Icon } from '@iconify/react/dist/iconify.js'


function AddOrderDilog() {
    return (
        <Dialog open={true} handler={() => console.log("opened")} className="p-10 pt-7 relative" >
            <button><Icon icon="charm:cross" className="absolute top-3 right-3 text-2xl" /></button>
            <div className="bg-[#e5effe] h-14 w-14 mx-auto rounded-full flex items-center justify-center">
                <img src={addicon} className="w-1/2 text-primary text-3xl" alt="description" />
            </div>
            <p className="text-2xl font-bold text-center text-black mt-3 mb-3">Add to orders</p>
            <div className="flex items-center justify-between bg-white rounded-md px-5 py-2 shadow-md w-8/12 mx-auto mb-2 border border-[#ECECEC] hover:bg-[#f5f4f4] hover:text-black">
                <p className="font-medium">Vendor 1</p>
                <div className="flex space-x-2 text-2xl">
                    <Icon icon="material-symbols:download" className='hover:text-primary' />
                    <Icon icon="gg:add" className='hover:text-primary'/>
                </div>
            </div>
            <div className="flex items-center justify-between bg-white rounded-md px-5 py-2 shadow-md w-8/12 mx-auto mb-2 border border-[#ECECEC] hover:bg-[#f5f4f4] hover:text-black">
                <p className="font-medium">Vendor 2</p>
                <div className="flex space-x-2 text-2xl">
                    <Icon icon="material-symbols:download" className='hover:text-primary' />
                    <Icon icon="gg:add" className='hover:text-primary'/>
                </div>
            </div>

            <div className="flex items-center justify-between bg-white rounded-md px-5 py-2 shadow-md w-8/12 mx-auto mb-2 border border-[#ECECEC] hover:bg-[#f5f4f4] hover:text-black">
                <p className="font-medium">Vendor 3</p>
                <div className="flex space-x-2 text-2xl">
                    <Icon icon="material-symbols:download" className='hover:text-primary' />
                    <Icon icon="gg:add" className='hover:text-primary'/>
                </div>
            </div>

            
            

        </Dialog>
    )
}

export default AddOrderDilog
Editor is loading...