feat: add sponsor links

RaunoT · Jul 21, 2024 · 50e0cf9 · 50e0cf9
1 parent f84c907
commit 50e0cf9
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 11 deletions.
diff --git a/src/app/_components/AppProvider.tsx b/src/app/_components/AppProvider.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import githubSvg from '@/assets/github.svg'
 import { Settings, Version } from '@/types'
 import {
   ArrowPathIcon,
@@ -61,17 +60,16 @@ export default function AppProvider({ children, settings, version }: Props) {
             href='https://github.com/RaunoT/plex-rewind/releases'
             aria-label='Update available'
             target='_blank'
+            className='link-light'
           >
             <ArrowPathIcon className='size-6' />
           </a>
         )}
-        <a href='https://github.com/RaunoT/plex-rewind' target='_blank'>
-          <Image src={githubSvg} alt='GitHub' className='size-5' />
-        </a>
         {settings.test && session?.user?.isAdmin && (
           <Link
             href={isSettings ? '/' : '/settings/features'}
             aria-label={isSettings ? 'Close settings' : 'Open settings'}
+            className='link-light'
           >
             {isSettings ? (
               <XCircleIcon className='size-6' />

diff --git a/src/app/_components/PageTitle.tsx b/src/app/_components/PageTitle.tsx
@@ -15,7 +15,7 @@ export default function PageTitle({ title, noBack }: Props) {
           <Link
             href='/'
             className={clsx(
-              'ml-5 block w-5 transition-transform hover:translate-x-0.5 hover:opacity-75 aria-disabled:pointer-events-none aria-disabled:opacity-75',
+              'link-light ml-5 block w-5 transition-transform hover:translate-x-0.5 aria-disabled:pointer-events-none aria-disabled:opacity-75',
               {
                 'absolute left-0 top-1/2 my-auto -translate-y-1/2': title,
               },

diff --git a/src/app/settings/layout.tsx b/src/app/settings/layout.tsx
@@ -1,7 +1,10 @@
+import githubSvg from '@/assets/github.svg'
 import { authOptions } from '@/lib/auth'
 import getSettings from '@/utils/getSettings'
 import getVersion from '@/utils/getVersion'
+import { CurrencyEuroIcon, HeartIcon } from '@heroicons/react/24/outline'
 import { getServerSession } from 'next-auth'
+import Image from 'next/image'
 import { redirect } from 'next/navigation'
 import { ReactNode } from 'react'
 import PageTitle from '../_components/PageTitle'
@@ -29,8 +32,34 @@ export default async function SettingsLayout({ children }: Props) {
       {settings.test && <SettingsNav />}
       {children}
 
+      <div className='glass-sheet mt-4 flex flex-col flex-wrap justify-between gap-3 py-4 sm:flex-row'>
+        <a
+          href='https://www.paypal.com/paypalme/raunot'
+          target='_blank'
+          className='link-light inline-flex items-center gap-2'
+        >
+          <CurrencyEuroIcon className='size-6 text-yellow-500' />
+          Buy me a coffee
+        </a>
+        <a
+          href='https://www.patreon.com/PlexRewind'
+          target='_blank'
+          className='link-light inline-flex items-center gap-2'
+        >
+          <HeartIcon className='size-6 text-red-500' />
+          Become a sponsor
+        </a>
+        <a
+          href='https://github.com/RaunoT/plex-rewind/issues'
+          target='_blank'
+          className='link-light inline-flex items-center gap-2'
+        >
+          <Image src={githubSvg} alt='GitHub' className='size-[24px] p-0.5' />
+          Report an issue
+        </a>
+      </div>
       <a
-        className='mx-auto mt-4 block w-fit text-center text-sm text-white/25'
+        className='link mx-auto mt-4 block w-fit text-center text-sm'
         href='https://github.com/RaunoT/plex-rewind/releases'
         target='_blank'
       >

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -60,6 +60,10 @@
     @apply text-neutral-400 hover:text-neutral-500;
   }
 
+  .link-light {
+    @apply hover:opacity-80;
+  }
+
   .nav {
     @apply flex flex-wrap items-center justify-center gap-3 gap-y-1 text-xs font-medium uppercase sm:gap-4 sm:text-sm 2xl:text-base;
   }

diff --git a/src/utils/getVersion.ts b/src/utils/getVersion.ts
@@ -18,6 +18,11 @@ export default async function getVersion(): Promise<Version> {
     try {
       const res = await fetch(
         'https://api.github.com/repos/RaunoT/plex-rewind/releases',
+        {
+          next: {
+            revalidate: 3600,
+          },
+        },
       )
       const data = await res.json()
 
@@ -27,12 +32,14 @@ export default async function getVersion(): Promise<Version> {
         )
       }
 
-      const latestRelease = data.find(
-        (release: GitHubRelease) =>
-          !release.draft && (!isDevelop ? !release.prerelease : true),
-      )
+      if (data) {
+        const latestRelease = data.find(
+          (release: GitHubRelease) =>
+            !release.draft && (!isDevelop ? !release.prerelease : true),
+        )
 
-      latestVersion = latestRelease.tag_name
+        latestVersion = latestRelease.tag_name
+      }
     } catch (error) {
       console.error('Error fetching latest version:', error)
     }