try out PWA support

components/TabButton.tsx

@@ -12,11 +12,11 @@ export const TabButton = (props: Props) => {
   return (
     <button
       onClick={props.onClick}
-      className={`button ${
+      className={`${
         props.active === props.tab
           ? "text-white"
           : "text-lightGray hover:text-white"
-      } bg-card font-semibold px-5 py-2 rounded-lg cursor-pointer select-none active:translate-y-1  active:[box-shadow:0_0px_0_0_#19999,0_0px_0_0_#19999] active:border-b-[0px] transition-all duration-150 [box-shadow:0_10px_0_0_#19999,0_15px_0_0_#19999] border-b-[5px] border-[#2A2A2A]`}
+      } bg-card font-semibold px-5 py-2 rounded-lg cursor-pointer select-none active:translate-y-1  active:[box-shadow:0_0px_0_0_#19999,0_0px_0_0_#19999] active:border-b-[0px] [box-shadow:0_10px_0_0_#19999,0_15px_0_0_#19999] border-b-[5px] border-[#2A2A2A]`}
     >
       {props.children}
     </button>

next.config.js

@@ -1,5 +1,11 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+
+const withPWA = require("next-pwa")({
+  dest: "public",
+  disable: process.env.NODE_ENV !== "production",
+});
+
+module.exports = withPWA({
   images: {
     remotePatterns: [
       {
@@ -11,6 +17,4 @@ const nextConfig = {
   env: {
     GOOGLE_PLACES_API_KEY: process.env.GOOGLE_PLACES_API_KEY,
   },
-};
-
-module.exports = nextConfig;
+});

package.json

@@ -38,6 +38,7 @@
     "next": "13.4.4",
     "next-api-handler": "^0.4.10",
     "next-auth": "^4.22.1",
+    "next-pwa": "^5.6.0",
     "next-s3-upload": "^0.3.0",
     "nsfwjs": "^2.4.2",
     "postcss": "8.4.24",

public/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "Scout Machine",
+  "short_name": "Scout Machine",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#fbbb04",
+  "background_color": "#141414",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/smLogo.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/smLogo.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}