Merge pull request #233 from rupeshhh007/staging

feat: add PWA install button for desktop version

Author: abhitrueprogrammer

src/components/Navbar.tsx

@@ -9,6 +9,7 @@ import ModeToggle from "@/components/toggle-theme";
 import { ArrowDownLeftIcon, StarIcon } from "lucide-react";
 import NavDropdownButton from "./NavDropdownButton";
 import FloatingNavbar from "./FloatingNavbar";
+import PWAInstallButton from "./ui/PWAInstallButton";
 
 function Navbar() {
   const pathname = usePathname();
@@ -69,6 +70,10 @@ function Navbar() {
             <ModeToggle />
           </div>
 
+          <div className="hidden md:block max-w-[200px]">
+            <PWAInstallButton />
+          </div>
+
           <Link href={pathname === "/upload" ? "/" : "/upload"}>
             <div className="flex items-center gap-2 rounded-full border border-[#3A3745] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#1A1823]">
               <ArrowDownLeftIcon className="h-4 w-4 rotate-90" />
@@ -84,7 +89,6 @@ function Navbar() {
             isOpen={open}
             onClick={() => setOpen((prev) => !prev)}
           />
-
           <div
             className={`transition-all duration-300 ease-in-out ${
               open ? "block" : "hidden"

src/components/screens/Info.tsx

@@ -92,7 +92,7 @@ function Info() {
           </Button>
         </Link>
       </section>
-      <div className="z-50 flex justify-center py-4">
+      <div className=" md:hidden z-50 flex justify-center py-4">
         <PWAInstallButton />
       </div>
     </>

src/components/ui/PWAInstallButton.tsx

@@ -1,11 +1,9 @@
-
 "use client";
 
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import { Download } from "lucide-react";
 
-
 interface BeforeInstallPromptEvent extends Event {
   prompt: () => Promise<void>;
   userChoice: Promise<{
@@ -16,46 +14,75 @@ interface BeforeInstallPromptEvent extends Event {
 
 const PWAInstallButton = () => {
   const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
-  const [showInstall, setShowInstall] = useState(false);
+  const [canInstall, setCanInstall] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+
     const handler = (e: Event) => {
       e.preventDefault();
       setDeferredPrompt(e as BeforeInstallPromptEvent);
-      setShowInstall(true);
+      setCanInstall(true);
     };
 
     window.addEventListener("beforeinstallprompt", handler);
-    return () => window.removeEventListener("beforeinstallprompt", handler);
+
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+      window.removeEventListener("beforeinstallprompt", handler);
+    };
   }, []);
 
   const handleInstall = async () => {
     if (!deferredPrompt) return;
-
     deferredPrompt.prompt();
     const { outcome } = await deferredPrompt.userChoice;
     if (outcome === "accepted") {
-      setShowInstall(false);
+      setCanInstall(false);
       setDeferredPrompt(null);
     }
   };
 
-  if (!showInstall) return null;
+  if (!canInstall) return null;
 
   return (
-    <div className="md:hidden flex items-center justify-between rounded-full bg-[#2b2343] px-4 py-2 shadow-md text-white w-fit">
-      <div className="flex items-center gap-3">
-        <Image src="/papers_logo.png" alt="Papers App" width={32} height={32} />
-        <span className="font-semibold text-lg">Papers App</span>
+    <>
+      
+      <div className="md:hidden flex items-center justify-between rounded-full bg-[#2b2343] px-4 py-2 shadow-md text-white w-fit">
+        <div className="flex items-center gap-3">
+          <Image src="/papers_logo.png" alt="Papers App" width={32} height={32} />
+          <span className="font-semibold text-lg">Papers App</span>
+        </div>
+        <button
+          onClick={handleInstall}
+          className="ml-6 flex items-center gap-2 rounded-full border border-gray-500 bg-[#1e1e24] px-4 py-1 text-sm font-semibold transition hover:bg-[#2b2b30]"
+        >
+          <Download className="h-4 w-4" />
+          Install
+        </button>
+      </div>
+
+      
+      <div
+  onClick={handleInstall}
+  className="hidden md:flex items-center gap-3 rounded-full px-5 py-2 text-white cursor-pointer bg-[#130e1f] border border-[#FFFFFF26] border-[1.5px]"
+>
+
+        <Image
+          src="/papers_logo.png"
+          alt="Papers App"
+          width={28}
+          height={28}
+        />
+        <span className="font-semibold text-sm">Papers App</span>
       </div>
-      <button
-        onClick={handleInstall}
-        className="ml-6 flex items-center gap-2 rounded-full border border-gray-500 bg-[#1e1e24] px-4 py-1 text-sm font-semibold transition hover:bg-[#2b2b30]"
-      >
-        <Download className="h-4 w-4" />
-        Install
-      </button>
-    </div>
+    </>
   );
 };