install PWA modal

app/(app)/_layout/MobileBanner.tsx

@@ -5,8 +5,11 @@ import { RiCloseFill } from "react-icons/ri";
 import { Button } from "@/components/ui/button";
 import useLocalStorage from "@/lib/hooks/useLocalStorage";
 import Logo from "@/assets/Logo";
+import InstallPWAModal from "@/components/Modals/PWAInstall";
+import { useModal } from "@/app/_providers/modal/provider";
 
 export default function MobileBanner() {
+  const modal = useModal();
   const [showPWAPrompt, setShowPWAPrompt] = useState(false);
   const [hidePWA, setHidePWA] = useLocalStorage<boolean | undefined>(
     "hidePWA",
@@ -22,6 +25,9 @@ export default function MobileBanner() {
     setHidePWA(true);
     setShowPWAPrompt(false);
   }
+  function handleShowModal() {
+    modal?.show(<InstallPWAModal />);
+  }
   if (!showPWAPrompt) return null;
   return (
     <div className="standalone-hide fixed bottom-[var(--bottom-nav-height)] flex w-screen items-center gap-3 border-t bg-card px-3 py-2.5 sm:hidden">
@@ -31,7 +37,7 @@ export default function MobileBanner() {
       <div className="flex-1 text-sm font-medium text-foreground">
         Get our PWA
       </div>
-      <Button size={"sm"} className="rounded-[6px]">
+      <Button onClick={handleShowModal} size={"sm"} className="rounded-[6px]">
         Install
       </Button>
       <button onClick={handleClickHide} className="center -mx-1">

app/(app)/_layout/index.tsx

@@ -1,13 +1,15 @@
 import BottomNav from "./BottomNav";
 import Header from "./Header";
 import Keystone from "./Keystone";
-import MobileBanner from "./MobileBanner";
 import Sidebar from "./Sidebar";
 import dynamic from "next/dynamic";
 
 const CommandDialog = dynamic(() => import("./components/CommandDialog"), {
   ssr: false,
 });
+const MobileBanner = dynamic(() => import("./MobileBanner"), {
+  ssr: false,
+});
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <main className="app-layout w-screen sm:absolute sm:inset-0">

components/Modals/PWAInstall.tsx

@@ -0,0 +1,46 @@
+"use client";
+import Template from "./Template";
+import { RxShare2 } from "react-icons/rx";
+import { CgAddR } from "react-icons/cg";
+
+export default function PWAInstallModal() {
+  const steps = [
+    {
+      slug: "share-btn",
+      content: (
+        <>
+          Tap <RxShare2 className="mx-1.5 h-5 w-5" /> in your browser below
+        </>
+      ),
+    },
+    {
+      slug: "add-to-home",
+      content: (
+        <>
+          Select &quot;Add to Home Screen <CgAddR className="ml-1.5 h-5 w-5" />
+          &quot;
+        </>
+      ),
+    },
+    {
+      slug: "pop-up",
+      content: <>When a popup appears, click &quot;Add&quot;</>,
+    },
+  ];
+  return (
+    <Template title="Install PWA" className="md:max-w-[400px]">
+      <ul role="list" className="-mx-2 mt-2 space-y-1">
+        {steps.map((step, i) => (
+          <li key={i}>
+            <div className="group flex gap-x-3 rounded-md p-2 text-sm font-medium leading-6 text-foreground">
+              <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-[0.625rem] font-medium text-muted-foreground">
+                {i + 1}
+              </span>
+              <span className="flex items-center truncate">{step.content}</span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </Template>
+  );
+}