Add donation button (closes #40)

1 files changed, 36 insertions, 28 deletions

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3e8dade..2223a84 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import { DonationButton } from '@/components/donation-button'
 import { ProgressBar } from '@/components/progress-bar'
 import { ThemeProvider } from '@/components/theme-provider'
 import { ThemeToggle } from '@/components/theme-toggle'
@@ -111,35 +112,42 @@ export default function RootLayout({
 
           {children}
 
-          <footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col space-y-2 text-xs [&_a]:underline">
-            <div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
-              <Link className="flex items-center gap-2" href="/">
-                <Image
-                  src="/logo-with-text.png"
-                  className="m-1 h-auto"
-                  width={(35 * 522) / 180}
-                  height={35}
-                  alt="Spliit"
-                />
-              </Link>
-            </div>
-            <div className="flex flex-col space-y a--no-underline-text-white">
-              <span>Made in Montréal, Québec 🇨🇦</span>
-              <span>
-                Built by{' '}
-                <a href="https://scastiel.dev" target="_blank" rel="noopener">
-                  Sebastien Castiel
-                </a>{' '}
-                and{' '}
-                <a
-                  href="https://github.com/scastiel/spliit2/graphs/contributors"
-                  target="_blank"
-                  rel="noopener"
-                >
-                  contributors
-                </a>
-              </span>
+          <footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col sm:flex-row sm:justify-between gap-4 text-xs [&_a]:underline">
+            <div className="flex flex-col space-y-2">
+              <div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
+                <Link className="flex items-center gap-2" href="/">
+                  <Image
+                    src="/logo-with-text.png"
+                    className="m-1 h-auto"
+                    width={(35 * 522) / 180}
+                    height={35}
+                    alt="Spliit"
+                  />
+                </Link>
+              </div>
+              <div className="flex flex-col space-y a--no-underline-text-white">
+                <span>Made in Montréal, Québec 🇨🇦</span>
+                <span>
+                  Built by{' '}
+                  <a href="https://scastiel.dev" target="_blank" rel="noopener">
+                    Sebastien Castiel
+                  </a>{' '}
+                  and{' '}
+                  <a
+                    href="https://github.com/scastiel/spliit2/graphs/contributors"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    contributors
+                  </a>
+                </span>
+              </div>
             </div>
+            {env.STRIPE_DONATION_LINK && (
+              <div>
+                <DonationButton donationUrl={env.STRIPE_DONATION_LINK} />
+              </div>
+            )}
           </footer>
           <Toaster />
         </ThemeProvider>