From 50d8c3d91de7c72c91c65f0aa54ae698f470268c Mon Sep 17 00:00:00 2001
From: Jonah Pflaster <jonahpflaster23pj@gmail.com>
Date: Fri, 18 Oct 2024 14:33:26 -0400
Subject: [PATCH 1/6] statscard started

---
 src/app/page.tsx             |  5 ++---
 src/components/StatsCard.tsx | 11 +++++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 src/components/StatsCard.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 254069d..20facd4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,11 @@
 "use client";
 
-import ExampleButton from "@components/ExampleButton";
+import StatsCard from "@components/StatsCard";
 
 export default function Home() {
   return (
     <div className="flex items-center justify-center h-screen">
-      {/* Example Button (ExampleButton.tsx in components folder) */}
-      <ExampleButton buttonText="Add User" />
+      <StatsCard/>
     </div>
   );
 }
diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx
new file mode 100644
index 0000000..847276e
--- /dev/null
+++ b/src/components/StatsCard.tsx
@@ -0,0 +1,11 @@
+const StatsCard = () => {
+  return (
+    <div className="max-w-sm p-36 bg-white border border-gray-200 rounded-lg shadow dark:bg-white-800 dark:border-gray-700">
+        <div className ="p-5">
+            <p className="mb-7 font-style italic text-black dark:text-black">Total Volunteers</p>
+        </div>
+    </div>
+  );
+};
+
+export default StatsCard;

From 4973b8f3a875ce66ff2654cf2a4ed3562a352145 Mon Sep 17 00:00:00 2001
From: Jonah Pflaster <jonahpflaster23pj@gmail.com>
Date: Fri, 18 Oct 2024 20:46:52 -0400
Subject: [PATCH 2/6] added the 4 main variables for the card

---
 src/app/page.tsx             |  7 ++++++-
 src/components/StatsCard.tsx | 23 +++++++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 20facd4..47a349e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,7 +5,12 @@ import StatsCard from "@components/StatsCard";
 export default function Home() {
   return (
     <div className="flex items-center justify-center h-screen">
-      <StatsCard/>
+      <StatsCard
+      heading = "Total Voluteers"
+      value = "50"
+      icon = "formkit:people" //icon id
+      date = "October 5, 2024"
+      />
     </div>
   );
 }
diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx
index 847276e..ab42156 100644
--- a/src/components/StatsCard.tsx
+++ b/src/components/StatsCard.tsx
@@ -1,8 +1,23 @@
-const StatsCard = () => {
+import React from 'react';
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+interface StatsCardProps {
+  heading: string;
+  value: number | string;
+  date: string;
+  icon: string;
+}
+
+const StatsCard = ({ heading, value, icon, date }: StatsCardProps) => {
   return (
-    <div className="max-w-sm p-36 bg-white border border-gray-200 rounded-lg shadow dark:bg-white-800 dark:border-gray-700">
-        <div className ="p-5">
-            <p className="mb-7 font-style italic text-black dark:text-black">Total Volunteers</p>
+    <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-lg">
+        <div className ="flex flex-col justify-between">
+            <h2 className="font-style font-bold text-black">{heading}</h2>
+            <p className="font-style font-bold text-black text-6xl">{value}</p>
+            <div className="text-right">
+              <Icon icon={icon} className="text-5xl" style={{ color: '#33BDB5' }} />
+            </div>
+            <p className="font-style text-gray-200">{date}</p>
         </div>
     </div>
   );

From abb61a475f630a8737c2533007692a7e248fe99e Mon Sep 17 00:00:00 2001
From: Jonah Pflaster <jonahpflaster23pj@gmail.com>
Date: Sun, 20 Oct 2024 21:15:27 -0400
Subject: [PATCH 3/6] worked on formatting statscard

---
 src/components/StatsCard.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx
index ab42156..cf107c3 100644
--- a/src/components/StatsCard.tsx
+++ b/src/components/StatsCard.tsx
@@ -10,15 +10,15 @@ interface StatsCardProps {
 
 const StatsCard = ({ heading, value, icon, date }: StatsCardProps) => {
   return (
-    <div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-lg">
-        <div className ="flex flex-col justify-between">
-            <h2 className="font-style font-bold text-black">{heading}</h2>
-            <p className="font-style font-bold text-black text-6xl">{value}</p>
-            <div className="text-right">
-              <Icon icon={icon} className="text-5xl" style={{ color: '#33BDB5' }} />
-            </div>
-            <p className="font-style text-gray-200">{date}</p>
+    <div className="block w-full max-w-md p-6 bg-white border border-gray-200 rounded-lg shadow-lg relative h-256 w-512">
+      <div className="flex flex-col justify-between h-full">
+        <h2 className="absolute inset-x-0 top-0 h-16 font-style font-bold text-black">{heading}</h2>
+        <p className="font-style font-bold text-black text-6xl">{value}</p>
+        <div className="absolute inset-y-0 right-0 w-16">
+          <Icon icon={icon} className="text-8xl" style={{ color: '#33BDB5' }} />
         </div>
+        <p className="absolute inset-x-0 bottom-0 h-6 font-style text-gray-200">{date}</p>
+      </div>
     </div>
   );
 };

From ebe558ae21729c71b815f3e7c4c361331c5f728f Mon Sep 17 00:00:00 2001
From: Jonah Pflaster <jonahpflaster23pj@gmail.com>
Date: Fri, 25 Oct 2024 14:28:33 -0400
Subject: [PATCH 4/6] Finished Statscard (however still needs correct font)

---
 src/app/page.tsx             | 14 +++++++++++++-
 src/components/StatsCard.tsx | 29 +++++++++++++++++++++--------
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 47a349e..96f8667 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,11 +6,23 @@ export default function Home() {
   return (
     <div className="flex items-center justify-center h-screen">
       <StatsCard
-      heading = "Total Voluteers"
+      heading = "Total Volunteers"
       value = "50"
       icon = "formkit:people" //icon id
       date = "October 5, 2024"
       />
+      <StatsCard
+      heading = "Total Volunteers hours"
+      value = "200"
+      icon = "bitcoin-icons:clock-outline" //icon id
+      date = "October 5, 2024"
+      />
+      <StatsCard
+      heading = "Total Events"
+      value = "14"
+      icon = "mdi-light:calendar" //icon id
+      date = "October 5, 2024"
+      />
     </div>
   );
 }
diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx
index cf107c3..20d0997 100644
--- a/src/components/StatsCard.tsx
+++ b/src/components/StatsCard.tsx
@@ -10,17 +10,30 @@ interface StatsCardProps {
 
 const StatsCard = ({ heading, value, icon, date }: StatsCardProps) => {
   return (
-    <div className="block w-full max-w-md p-6 bg-white border border-gray-200 rounded-lg shadow-lg relative h-256 w-512">
-      <div className="flex flex-col justify-between h-full">
-        <h2 className="absolute inset-x-0 top-0 h-16 font-style font-bold text-black">{heading}</h2>
-        <p className="font-style font-bold text-black text-6xl">{value}</p>
-        <div className="absolute inset-y-0 right-0 w-16">
-          <Icon icon={icon} className="text-8xl" style={{ color: '#33BDB5' }} />
+    <div className="w-[360px] h-[160px] h-40 px-6 py-4 bg-white rounded-lg shadow border border-[#e4e7ec] flex-col justify-start items-start gap-4 inline-flex">
+    <div className="self-stretch justify-start items-center gap-2 inline-flex">
+        <div className="grow shrink basis-0 flex-col justify-start items-start gap-4 inline-flex">
+            <div className="self-stretch justify-start items-start gap-2 inline-flex">
+                <div className="grow shrink basis-0 text-[#344053] text-base font-semibold font-['Sofia Pro'] leading-normal">{heading}</div>
+            </div>
+            <div className="self-stretch justify-start items-end gap-4 inline-flex">
+                <div className="grow shrink basis-0 flex-col justify-start items-start gap-2 inline-flex">
+                    <div className="self-stretch text-[#0f1728] text-5xl font-semibold font-['Kepler Std'] leading-[60px]">{value}</div>
+                    <div className="self-stretch justify-start items-center gap-2 inline-flex">
+                      <div className="grow shrink basis-0 text-[#475466] py-1 text-sm font-medium font-['Inter'] leading-tight">{date}</div>
+                    </div>
+                </div>
+            </div>
         </div>
-        <p className="absolute inset-x-0 bottom-0 h-6 font-style text-gray-200">{date}</p>
-      </div>
+        <div className="w-[110px] h-[110px] relative">
+          <Icon icon={icon} className="size-full" style={{ color: '#33BDB5' }} />
+        </div>
+    </div>
     </div>
+    
   );
 };
 
 export default StatsCard;
+
+

From cc167ec85319693b16ced20231cd1de167145af2 Mon Sep 17 00:00:00 2001
From: wkim10 <wkim10@tufts.edu>
Date: Sun, 27 Oct 2024 14:46:40 -0400
Subject: [PATCH 5/6] small prettier change

---
 src/app/page.tsx             | 24 +++++++++++------------
 src/components/StatsCard.tsx | 37 +++++++++++++++++++++---------------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 96f8667..d208833 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,22 +6,22 @@ export default function Home() {
   return (
     <div className="flex items-center justify-center h-screen">
       <StatsCard
-      heading = "Total Volunteers"
-      value = "50"
-      icon = "formkit:people" //icon id
-      date = "October 5, 2024"
+        heading="Total Volunteers"
+        value="50"
+        icon="formkit:people" //icon id
+        date="October 5, 2024"
       />
       <StatsCard
-      heading = "Total Volunteers hours"
-      value = "200"
-      icon = "bitcoin-icons:clock-outline" //icon id
-      date = "October 5, 2024"
+        heading="Total Volunteers hours"
+        value="200"
+        icon="bitcoin-icons:clock-outline" //icon id
+        date="October 5, 2024"
       />
       <StatsCard
-      heading = "Total Events"
-      value = "14"
-      icon = "mdi-light:calendar" //icon id
-      date = "October 5, 2024"
+        heading="Total Events"
+        value="14"
+        icon="mdi-light:calendar" //icon id
+        date="October 5, 2024"
       />
     </div>
   );
diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx
index 20d0997..d4db323 100644
--- a/src/components/StatsCard.tsx
+++ b/src/components/StatsCard.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 
 interface StatsCardProps {
@@ -11,29 +11,36 @@ interface StatsCardProps {
 const StatsCard = ({ heading, value, icon, date }: StatsCardProps) => {
   return (
     <div className="w-[360px] h-[160px] h-40 px-6 py-4 bg-white rounded-lg shadow border border-[#e4e7ec] flex-col justify-start items-start gap-4 inline-flex">
-    <div className="self-stretch justify-start items-center gap-2 inline-flex">
+      <div className="self-stretch justify-start items-center gap-2 inline-flex">
         <div className="grow shrink basis-0 flex-col justify-start items-start gap-4 inline-flex">
-            <div className="self-stretch justify-start items-start gap-2 inline-flex">
-                <div className="grow shrink basis-0 text-[#344053] text-base font-semibold font-['Sofia Pro'] leading-normal">{heading}</div>
+          <div className="self-stretch justify-start items-start gap-2 inline-flex">
+            <div className="grow shrink basis-0 text-[#344053] text-base font-semibold font-['Sofia Pro'] leading-normal">
+              {heading}
             </div>
-            <div className="self-stretch justify-start items-end gap-4 inline-flex">
-                <div className="grow shrink basis-0 flex-col justify-start items-start gap-2 inline-flex">
-                    <div className="self-stretch text-[#0f1728] text-5xl font-semibold font-['Kepler Std'] leading-[60px]">{value}</div>
-                    <div className="self-stretch justify-start items-center gap-2 inline-flex">
-                      <div className="grow shrink basis-0 text-[#475466] py-1 text-sm font-medium font-['Inter'] leading-tight">{date}</div>
-                    </div>
+          </div>
+          <div className="self-stretch justify-start items-end gap-4 inline-flex">
+            <div className="grow shrink basis-0 flex-col justify-start items-start gap-2 inline-flex">
+              <div className="self-stretch text-[#0f1728] text-5xl font-semibold font-['Kepler Std'] leading-[60px]">
+                {value}
+              </div>
+              <div className="self-stretch justify-start items-center gap-2 inline-flex">
+                <div className="grow shrink basis-0 text-[#475466] py-1 text-sm font-medium font-['Inter'] leading-tight">
+                  {date}
                 </div>
+              </div>
             </div>
+          </div>
         </div>
         <div className="w-[110px] h-[110px] relative">
-          <Icon icon={icon} className="size-full" style={{ color: '#33BDB5' }} />
+          <Icon
+            icon={icon}
+            className="size-full"
+            style={{ color: "#33BDB5" }}
+          />
         </div>
+      </div>
     </div>
-    </div>
-    
   );
 };
 
 export default StatsCard;
-
-

From efbfd77bf4abc225d4baeea99d77722d2c8a325f Mon Sep 17 00:00:00 2001
From: Jonah Pflaster <jonahpflaster23pj@gmail.com>
Date: Sun, 27 Oct 2024 20:25:22 -0400
Subject: [PATCH 6/6] Finally fully functioning statscard!

---
 src/app/page.tsx             | 20 +-------------------
 src/components/StatsCard.tsx |  2 +-
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 96f8667..7a8ce47 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,28 +1,10 @@
 "use client";
 
-import StatsCard from "@components/StatsCard";
 
 export default function Home() {
   return (
     <div className="flex items-center justify-center h-screen">
-      <StatsCard
-      heading = "Total Volunteers"
-      value = "50"
-      icon = "formkit:people" //icon id
-      date = "October 5, 2024"
-      />
-      <StatsCard
-      heading = "Total Volunteers hours"
-      value = "200"
-      icon = "bitcoin-icons:clock-outline" //icon id
-      date = "October 5, 2024"
-      />
-      <StatsCard
-      heading = "Total Events"
-      value = "14"
-      icon = "mdi-light:calendar" //icon id
-      date = "October 5, 2024"
-      />
+      
     </div>
   );
 }
diff --git a/src/components/StatsCard.tsx b/src/components/StatsCard.tsx
index 20d0997..6600e4b 100644
--- a/src/components/StatsCard.tsx
+++ b/src/components/StatsCard.tsx
@@ -10,7 +10,7 @@ interface StatsCardProps {
 
 const StatsCard = ({ heading, value, icon, date }: StatsCardProps) => {
   return (
-    <div className="w-[360px] h-[160px] h-40 px-6 py-4 bg-white rounded-lg shadow border border-[#e4e7ec] flex-col justify-start items-start gap-4 inline-flex">
+    <div className="w-[360px] h-[160px] px-6 py-4 bg-white rounded-lg shadow border border-[#e4e7ec] flex-col justify-start items-start gap-4 inline-flex">
     <div className="self-stretch justify-start items-center gap-2 inline-flex">
         <div className="grow shrink basis-0 flex-col justify-start items-start gap-4 inline-flex">
             <div className="self-stretch justify-start items-start gap-2 inline-flex">