feat: complete day 20 react task

2025-07-23 23:25:19 +01:00
parent 743187b216
commit b0d86465f2
259 changed files with 42427 additions and 11 deletions
@@ -0,0 +1,55 @@
+
+
+import React from "react";
+
+const ImagePreviewModal = ({ file, handleFileUpload, cancelFileUpload }) => {
+    const [imageSrc, setImageSrc] = React.useState()
+
+    React.useEffect(() => {
+        if (file.length > 0) {
+            setImageSrc(URL.createObjectURL(file[0]))
+        }
+    }, [file])
+
+
+    return (
+        <>
+            <div className="fixed inset-0 z-10 overflow-y-auto">
+                <div
+                    className="fixed inset-0 w-full h-full bg-black opacity-40"
+                    onClick={cancelFileUpload}
+                ></div>
+                <div className="flex items-center min-h-screen px-4 py-8">
+                    <div className="relative w-full max-w-lg p-4 mx-auto bg-white rounded-md shadow-lg">
+                        <div className="mt-3 sm:flex">
+                            <div className="mt-2 text-center sm:ml-4 sm:text-left">
+                                <h4 className="text-lg font-medium text-gray-800">
+                                    Send Image{file.length > 1 && 's'}
+                                </h4>
+                                <img className="block" src={imageSrc} />
+                                <div className="items-center gap-2 mt-3 sm:flex">
+                                    <button
+                                        className="w-full mt-2 p-2.5 flex-1 mr-4 text-white bg-blue-600 whitespace-nowrap rounded-md outline-none ring-offset-2 ring-blue-600 focus:ring-2"
+                                        onClick={handleFileUpload}
+                                    >
+                                        Send Message
+                                    </button>
+                                    <button
+                                        className="w-full mt-2 p-2.5 flex-1 text-gray-800 rounded-md outline-none border ring-offset-2 ring-indigo-600 focus:ring-2"
+                                        onClick={cancelFileUpload}
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default ImagePreviewModal
+
+