From 83b78e1c397c781f6c5a6cc0cf7f12d485ee0f94 Mon Sep 17 00:00:00 2001
From: F53 <fseusb@gmail.com>
Date: Tue, 22 Nov 2022 16:10:27 -0700
Subject: [PATCH] example implementation, waiting on api to use

---
 client/src/components/Footer.js | 44 ++++++++++++++++++++++++++-------
 client/src/styles/footer.scss   | 15 ++++++++---
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Footer.js b/client/src/components/Footer.js
index de649f6..20b564c 100644
--- a/client/src/components/Footer.js
+++ b/client/src/components/Footer.js
@@ -1,14 +1,40 @@
+import { useState } from "react"
 import { Link } from "react-router-dom"
 
 export function Footer() {
-  return <footer className="row centered footer">
-    <div className="spacer"/>
-    <Link to="/about">About</Link>
-    <Link to="/contact">Contact</Link>
-    <Link to="/legal">Legal</Link>
-    <Link to="/credits">Credits</Link>
-    <Link to="/disclaimer">Disclaimer</Link>
-    <a href="https://github.com/CodeF53/inhumane-cards/">Github</a>
-    <div className="spacer"/>
+  const [currentDonations, setCurrentDonations] = useState(0)
+  const [donationGoal, setDonationGoal] = useState(156)
+  // ! waiting on Ko-fi response on api for goals:
+  // fetch("https://api.ko-fi.com/f53dev/goal/0")
+  // .then(r=>r.json().then(d=>{
+  //   setCurrentDonations(d.current)
+  //   setDonationGoal(d.goal)
+  // }))
+
+  return <footer className="col centered footer">
+    <div className="row centered donate">
+      <div className="spacer"/>
+      <div className="panel col">
+        <h3 className="centered">2023 Server Costs</h3>
+
+        <div className="progress row">
+          <progress value={currentDonations} max={donationGoal}/>
+          <span className="progressText">${currentDonations} of ${donationGoal}</span>
+        </div>
+
+        <a href="https://ko-fi.com/f53dev/goal?g=0" className="centered"><button>Donate</button></a>
+      </div>
+      <div className="spacer"/>
+    </div>
+    <div className="row centered links">
+      <div className="spacer"/>
+      <Link to="/about">About</Link>
+      <Link to="/contact">Contact</Link>
+      <Link to="/legal">Legal</Link>
+      <Link to="/credits">Credits</Link>
+      <Link to="/disclaimer">Disclaimer</Link>
+      <a href="https://github.com/CodeF53/inhumane-cards/">Github</a>
+      <div className="spacer"/>
+    </div>
   </footer>
 }
\ No newline at end of file
diff --git a/client/src/styles/footer.scss b/client/src/styles/footer.scss
index 0cc1c1f..fd3b5fa 100644
--- a/client/src/styles/footer.scss
+++ b/client/src/styles/footer.scss
@@ -1,8 +1,17 @@
 .footer {
-  gap: 1rem;
-  padding-bottom: 1rem;
   a { color: white; }
-
+  padding-bottom: 1rem;
   width: 100%;
   overflow-x: scroll;
+
+  gap: 1rem;
+  & > .links { gap: 1rem; }
+
+  & > .donate > .panel {
+    padding: 0.25rem 0.5rem;
+
+    & > .progress {
+      gap: 1rem;
+    }
+  }
 }
\ No newline at end of file