(null);
+
+ // Function to toggle modals by name
+ const toggleModal = (name: string) => {
+ setIsOpen(isOpen === name ? null : name); // Toggle modal based on the current state
+ };
+
+ // Data array for preview content; simplifies adding/removing items
+ const previewData = [
+ {
+ avatar: "/svgs/eth.svg",
+ name: "ETH",
+ time: "08:43 PM",
+ userDetails: "User: namulabs is a fantastic company...",
+ userAvatar: "N",
+ className:
+ "flex w-[300px] flex-col items-center justify-center space-y-3 bg-[#2C2D30] p-5 text-white",
+ content: (
+ <>
+
+ Transaction
processing
+
+
+
+
+
+
+
+ Uploading your transaction to the node. please wait for a moment...{" "}
+
This may take up to 2 minutes.
+
+
+ ),
+ },
+ {
+ avatar: "/svgs/nvir.svg",
+ name: "Nvir",
+ time: "08:42 AM",
+ userDetails: "User: namulabs is a fantastic company...",
+ content: (
+ <>
+
+ Transaction
processing
+
+
+
+
+
+
+
+ Uploading your transaction to the node. please wait for a moment...{" "}
+
This may take up to 2 minutes.
+
+
+ ),
+ },
+ ];
+
+ return (
+ <>
+
+
+ {previewData.map((data, index) => (
+ toggleModal(data.name)}
+ modalOpen={isOpen === data.name} // Conditional modal display
+ setModalOpen={() => setIsOpen(null)} // Close modal on demand
+ className='flex w-[300px] flex-col items-center justify-center space-y-3 bg-[#2C2D30] p-5 text-white'
+ >
+ {data.content}
+
+ ))}
+
+
+
+
+
+
+
+ {name ? name : "Proxima"}
+
+
+
+ {footerNavData.map((data, i) => {
+ const { icon, path } = data;
+
+ return (
+
+
+
+
+
+ );
+ })}
+
+
+ {/* Sample using custom svg */}
+ {props.onClickLeftIcon && (
+
+
+
+ )}
+
+
{props.title}
+
+ {/* Sample using Antd icon */}
+ {props.onClickRightIcon && (
+
console.log("Antd icon clicked")}
+ >
+
+
+ )}
+