Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from "react";
import OrderDetails from "./OrderDetails";
import EditOrder from "./EditOrder";
import { Icon } from "@/components/ui/icons";
import { Button } from "@/components/ui";
interface Order {
id: string;
orderId: string;
createdAt: string;
status: "delivered" | "on-hold" | "processing" | string;
title: string;
total: string | number;
}
interface OrderModalProps {
showDetails: boolean;
showEdit: boolean;
toggleModal: (show: boolean) => void;
order: Order;
}
const OrderModal: React.FC<OrderModalProps> = ({ showDetails, showEdit, toggleModal, order }) => {
if (!showDetails && !showEdit) {
return null;
}
return (
<div
className={`backdrop-filter-sm visible fixed left-0 top-0 z-[99999] flex min-h-screen w-full justify-center items-center bg-[#000]/40 px-4 py-8 sm:px-8`}
>
<div className="shadow-7 relative w-full max-w-[600px] h-[242px] scale-100 transform rounded-[15px] bg-white transition-all flex flex-col justify-center items-center">
<Button
onClick={() => toggleModal(false)}
variant="ghost"
size="sm"
className="text-body absolute -right-6 -top-6 z-[9999] flex h-11.5 w-11.5 items-center justify-center rounded-full border-2 border-stroke bg-white hover:text-dark"
>
<Icon name="close" size={24} />
</Button>
<>
{showDetails && <OrderDetails orderItem={order} />}
{showEdit && <EditOrder order={order} toggleModal={toggleModal} />}
</>
</div>
</div>
);
};
export default OrderModal;
|