small prettier change

JumboCode · Oct 27, 2024 · cc167ec · cc167ec
1 parent ebe558a
commit cc167ec
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 27 deletions.
diff --git 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
@@ -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;
-
-