Update src/components/redirect-modal/redirect-modal.tsx

src/components/redirect-modal/redirect-modal.tsx

@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+
+interface RedirectModalProps {
+  onDismiss: () => void;
+}
+
+const RedirectModal = ({ onDismiss }: RedirectModalProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${
+        isVisible ? "opacity-100" : "opacity-0"
+      }`}
+    >
+      <div
+        className="absolute inset-0 bg-black bg-opacity-75"
+        onClick={onDismiss}
+      />
+      <div className="relative bg-gray-900 rounded-lg shadow-2xl p-8 max-w-md w-full mx-4 transform transition-transform duration-300">
+        <h2 className="text-2xl font-bold text-white mb-4">
+          New Version Available!
+        </h2>
+        <p className="text-gray-300 mb-6">
+          A new and improved version of DeepSite is now available. We recommend
+          using the latest version for the best experience and newest features.
+        </p>
+        <div className="flex gap-4">
+          <a
+            href="https://deepsite.hf.co/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 text-center"
+          >
+            Go to Latest Version
+          </a>
+          <button
+            onClick={onDismiss}
+            className="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200"
+          >
+            Continue Here
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RedirectModal;