complete delete modal

src/components/management-bank-accounts/bank-cart.tsx

@@ -4,10 +4,11 @@ import { FC } from "react"
 import { findBankByPAN, formatCartNumber } from "../../utility/cart"
 
 type Props = {
-    item: BankCartInterface
+    item: BankCartInterface,
+    handleOpenDeleteDialog: () => void
 }
 
-export const BankCart: FC<Props> = ({ item }) => {
+export const BankCart: FC<Props> = ({ item, handleOpenDeleteDialog }) => {
     console.log("item=>", item)
     return (
         <div className="w-full flex flex-col justify-between rounded-[40px] bg-auth-form p-[18px] cursor-pointer bank-bg bg-bank-mehr min-h-[226px]">
@@ -17,7 +18,7 @@ export const BankCart: FC<Props> = ({ item }) => {
                     <p className="text-lg font-medium text-primary-text-color">بانک {item?.bankPersianName}</p>
                 </div>
                 <div className="flex flex-row gap-3 items-center">
-                    <Trash color="#777577" />
+                    <Trash color="#777577" onClick={handleOpenDeleteDialog} />
                     <Edit color="#777577" />
                 </div>
             </div>

src/components/management-bank-accounts/delete-card.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react"
+import { DialogComponent } from "../common/dialog"
+import { Trash } from "iconsax-react"
+import { Button } from "@headlessui/react"
+
+type Props = {
+    isOpen: boolean,
+    close: () => void
+}
+
+export const DeleteCardDialog: FC<Props> = ({ isOpen, close }) => {
+    return (
+        <DialogComponent isOpen={isOpen} close={close} title="حذف حساب بانکی" subTitle="از حذف حساب بانکی مربوطه اطمینان دارید؟" icon={<Trash color="#11212D" className="size-[50px]" />}>
+            <div className="flex flex-col gap-[6px] mt-10">
+                <Button className="w-full bg-primary-color text-white">حذف</Button>
+                <Button onClick={close} className="w-full bg-transparent text-primary-color">لغو</Button>
+            </div>
+        </DialogComponent>
+    )
+}

src/components/management-bank-accounts/index.tsx

@@ -4,18 +4,23 @@ import { bankCarts } from "../../utility/cart"
 import { BankCart } from "./bank-cart"
 import { CreateNewCart } from "./create-new-cart"
 import { AddNewCardDialog } from "./add-new-cart-dialog"
+import { DeleteCardDialog } from "./delete-card"
 
 export const ManagementBankAccounts = () => {
     const [showDialog, setShowDialog] = useState<boolean>(false)
     const handleCloseDialog = () => setShowDialog(false)
     const handleOpenDialog = () => setShowDialog(true)
+    const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false)
+    const handleOpenDeleteDialog = () => setShowDeleteDialog(true)
+    const handleCloseDeleteDialog = () => setShowDeleteDialog(false)
     return (
         <>
             <div className="w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-6">
                 <CreateNewCart handleOpenDialog={handleOpenDialog} />
-                {bankCarts?.map((item: BankCartInterface) => <BankCart key={item?.id} item={item} />)}
+                {bankCarts?.map((item: BankCartInterface) => <BankCart key={item?.id} item={item} handleOpenDeleteDialog={handleOpenDeleteDialog} />)}
             </div>
             <AddNewCardDialog isOpen={showDialog} close={handleCloseDialog} />
+            <DeleteCardDialog isOpen={showDeleteDialog} close={handleCloseDeleteDialog} />
         </>
     )
 }