From cc35bcb2f12db5cec99c153a0cefdd19bf66976b Mon Sep 17 00:00:00 2001
From: Derek Sonnenberg <fedellen@pixelpajamastudios.com>
Date: Fri, 29 Dec 2023 11:50:39 -0600
Subject: [PATCH] feat: add web version to footer

---
 web/.env                                        | 2 ++
 web/.gitignore                                  | 2 +-
 web/src/components/footer/PixelPajamaWidget.tsx | 1 +
 web/src/style/tailwind.css                      | 5 ++++-
 4 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 web/.env

diff --git a/web/.env b/web/.env
new file mode 100644
index 0000000..60a2d2a
--- /dev/null
+++ b/web/.env
@@ -0,0 +1,2 @@
+REACT_APP_VERSION=$npm_package_version
+REACT_APP_NAME=$npm_package_name
diff --git a/web/.gitignore b/web/.gitignore
index 0eb302a..674ed9f 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -15,7 +15,7 @@
 
 # misc
 .DS_Store
-.env
+!.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/web/src/components/footer/PixelPajamaWidget.tsx b/web/src/components/footer/PixelPajamaWidget.tsx
index 3226a30..50233a6 100644
--- a/web/src/components/footer/PixelPajamaWidget.tsx
+++ b/web/src/components/footer/PixelPajamaWidget.tsx
@@ -16,6 +16,7 @@ export default function PixelPajamaWidget() {
               Report Bug
             </a>
           </li>
+          <li className="version">v{process.env.REACT_APP_VERSION}</li>
         </ul>
         <a className="text-link" href="https://pixelpajamastudios.com">
           © {new Date().getFullYear()} Pixel Pajama Studios LLC
diff --git a/web/src/style/tailwind.css b/web/src/style/tailwind.css
index 04f0c10..bf3b172 100644
--- a/web/src/style/tailwind.css
+++ b/web/src/style/tailwind.css
@@ -158,6 +158,9 @@
   .header-option-button svg {
     @apply w-7 h-7 sm:w-9 sm:h-9 mb-2;
   }
+  .version {
+    @apply text-xs sm:text-sm md:text-base no-underline;
+  }
 
   /** Item options */
 
@@ -425,7 +428,7 @@
     @apply flex flex-col lg:flex-row justify-center items-center space-y-4 lg:space-y-0 lg:space-x-6 m-4;
   }
   #ppjs-widget div {
-    @apply flex flex-col space-y-2 justify-center items-center underline;
+    @apply flex flex-col space-y-2 justify-center items-center;
   }
   #ppjs-widget ul {
     @apply flex space-x-6;