#1248 - Add Link to Google Play store to download mobile app (#1252)

* #1248 - Add Link to Google Play store in new window to download mobile Android app
OpenBeta · Jan 14, 2025 · aa4cfc1 · aa4cfc1
1 parent 0cf9c78
commit aa4cfc1
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 10 deletions.
diff --git a/public/GetItOnGooglePlay_Badge_Web_color.png b/public/GetItOnGooglePlay_Badge_Web_color.png
diff --git a/src/app/(default)/components/DesktopHeader.tsx b/src/app/(default)/components/DesktopHeader.tsx
@@ -1,14 +1,15 @@
 'use client'
+import Link from 'next/link'
+import React from 'react'
 import { signIn, useSession } from 'next-auth/react'
 import { MapTrifold, Pulse, LineSegments, Planet } from '@phosphor-icons/react/dist/ssr'
 
-import { Logo } from '../header'
+import { Logo, MobileLink } from '../header'
 import { XSearchMinimal } from '@/components/search/XSearch'
 import { NavMenuItem, NavMenuItemProps } from '@/components/ui/NavMenuButton'
 import GitHubStars from '@/components/GitHubStars'
 import AuthenticatedProfileNavButton from '../../../components/AuthenticatedProfileNavButton'
-import Link from 'next/link'
-import React from 'react'
+import googlePlay from '@/public/GetItOnGooglePlay_Badge_Web_color.png'
 
 export const DesktopHeader: React.FC = () => {
   const navListDefault: NavMenuItemProps[] = [
@@ -50,7 +51,7 @@ export const DesktopHeader: React.FC = () => {
       />)
   )
 
-  topLevelNav.push(<GitHubStars />)
+  topLevelNav.push(<GitHubStars key='github-stars' />)
 
   return (
     <header className='hidden lg:block'>
@@ -62,6 +63,11 @@ export const DesktopHeader: React.FC = () => {
             <XSearchMinimal />
             <div className='text-base-300/50 font-thin text-xl'>|</div>
             <Link href='/maps' className='text-sm flex items-center whitespace-nowrap hover:underline hover:decoration-1 font-semibold gap-2'><MapTrifold size={18} />Maps</Link>
+            <MobileLink
+              link='https://play.google.com/store/apps/details?id=io.openbeta'
+              description='Get it on Google Play'
+              image={googlePlay}
+            />
           </div>
           <div>
             <SignupOrLogin />

diff --git a/src/app/(default)/components/MobileHeader.tsx b/src/app/(default)/components/MobileHeader.tsx
@@ -1,9 +1,10 @@
 'use client'
 import { useSession } from 'next-auth/react'
-import { Logo } from '../header'
+import { Logo, MobileLink } from '../header'
 import { XSearchMinimal } from '@/components/search/XSearch'
 import { LoginButton, More } from '@/components/MobileAppBar'
 import AuthenticatedProfileNavButton from '../../../components/AuthenticatedProfileNavButton'
+import googlePlay from '@/public/GetItOnGooglePlay_Badge_Web_color.png'
 
 /**
  * Main header for mobile
@@ -12,11 +13,21 @@ export const MobileHeader: React.FC = () => {
   const { status } = useSession()
   const nav = status === 'authenticated' ? <AuthenticatedProfileNavButton /> : <LoginButton />
   return (
-    <header className='flex lg:hidden items-center justify-between gap-6 py-2'>
-      <Logo />
-      <XSearchMinimal />
-      {nav}
-      <More />
+    <header>
+      <div className='flex lg:hidden items-center justify-between gap-6 py-2'>
+        <Logo />
+        <XSearchMinimal />
+        {nav}
+        <More />
+      </div>
+      <div className='flex lg:hidden'>
+        <MobileLink
+          link='https://play.google.com/store/apps/details?id=io.openbeta'
+          description='Get it on Google Play'
+          image={googlePlay}
+          className='mr-2 mt-1'
+        />
+      </div>
     </header>
   )
 }
diff --git a/src/app/(default)/header.tsx b/src/app/(default)/header.tsx
@@ -1,5 +1,6 @@
 import clx from 'classnames'
 import Link from 'next/link'
+import Image from 'next/image'
 
 import OpenBetaLogo from '@/assets/brand/openbeta-logo'
 import { DesktopHeader } from './components/DesktopHeader'
@@ -33,3 +34,30 @@ export const Logo: React.FC<{ size?: LogoSize, className?: string, withText?: bo
     </Link>
   )
 }
+
+interface MobileLinkProps {
+  link: string
+  image: string
+  description: string
+  className?: string
+}
+
+/**
+ * Reusable mobile link component
+ */
+export const MobileLink: React.FC<MobileLinkProps> = ({ link, image, description, className }) => {
+  return (
+    <Link href={link} rel='noopener noreferrer' target='_blank' passHref className={className}>
+      <Image
+        src={image}
+        alt={description}
+        width={125}
+        height={37}
+        priority
+        style={{
+          maxWidth: 'none'
+        }}
+      />
+    </Link>
+  )
+}