Adds a sponsor link to the home page

arcanis · Dec 2, 2024 · 5995717 · 5995717
1 parent f5baba8
commit 5995717
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/src/components/SideMenu.tsx b/src/components/SideMenu.tsx
@@ -14,12 +14,12 @@ function Flag({className, code}: {className?: string, code: string}) {
 export function MenuItem({icon, to, onClick, children}: {icon: React.ReactNode, to?: string, onClick?: () => void, children: React.ReactNode}) {
   const contents = (
     <div className="flex items-center select-none">
-      <div className={`w-6 mr-2 text-center`}>{icon}</div>
+      <div className={`flex items-center justify-center w-6 mr-2 text-center`}>{icon}</div>
       <div>{children}</div>
     </div>
   );
 
-  const className = `flex bg-white/60 hover:bg-white rounded shadow px-2 py-1 cursor-pointer items-baseline`;
+  const className = `flex bg-white/60 hover:bg-white transition-colors rounded shadow px-2 py-1 cursor-pointer items-baseline`;
 
   const render = to
     ? to.startsWith(`https://`)

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -17,6 +17,7 @@ export const en = {
   },
   home: {
     vanity: "Project started in winter 2015 by Maël",
+    sponsor: "Sponsor me on GitHub",
     title: "Secret Santa Planner",
     explanation: [
       "Welcome! This tool will help you arrange your holiday gift exchanges. Simply list all participants, and we'll randomly assign pairings according to the rules you set.",

diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts
@@ -19,6 +19,7 @@ export const fr: Translations = {
   },
   home: {
     vanity: "Projet lancé en hiver 2015 par Maël",
+    sponsor: "Faire un don sur GitHub",
     title: "Planificateur de Secret Santa",
     explanation: [
       "Bienvenue ! Cet outil est fait pour vous aider à organiser vos échanges de cadeaux. Listez simplement vos participants et nous vous constituerons aléatoirement des paires selon les règles que vous aurez définies.",

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -12,7 +12,7 @@ import { PostCard } from '../components/PostCard';
 import { Trans, useTranslation } from 'react-i18next';
 import { MenuItem } from '../components/SideMenu';
 import { PageTransition } from '../components/PageTransition';
-import { Code, Heart, Rows } from '@phosphor-icons/react';
+import { Code, Heart, Rows, Star } from '@phosphor-icons/react';
 import { Settings } from '../components/Settings';
 import { useLocalStorage } from '../hooks/useLocalStorage';
 import { Layout } from '../components/Layout';
@@ -104,9 +104,14 @@ export function Home() {
   };
 
   const menuItems = [
-    <MenuItem key={`vanity`} to="https://bsky.app/profile/mael.dev" icon={<Heart className={`text-red-700`} weight={`fill`}/>}>
-      {t(`home.vanity`)}
-    </MenuItem>
+    <div className="flex flex-col space-y-2 lg:flex-row lg:space-y-0 lg:space-x-2">
+      <MenuItem key={`vanity`} to="https://bsky.app/profile/mael.dev" icon={<Star className={`text-orange-500`} weight={`fill`}/>}>
+        {t(`home.vanity`)}
+      </MenuItem>
+      <MenuItem key={`sponsor`} to="https://github.com/sponsors/arcanis?frequency=one-time&sponsor=arcanis" icon={<Heart className={`text-red-700`} weight={`fill`}/>}>
+        {t(`home.sponsor`)}
+      </MenuItem>
+    </div>,
   ];
 
   const toggleViewButton = (

diff --git a/src/pages/Pairing.tsx b/src/pages/Pairing.tsx
@@ -73,7 +73,7 @@ export function Pairing() {
   }
 
   const menuItems = [
-    <MenuItem key={`back`} to="/" icon={<ArrowLeft/>}>
+    <MenuItem key={`back`} to="/" icon={<ArrowLeft weight={`bold`}/>}>
       {t('pairing.startYourOwn')}
     </MenuItem>
   ];