From ae646fceccfbe66f1ca3b6941561964e9ff8cbec Mon Sep 17 00:00:00 2001
From: teenageknight <bkajackson9@gmail.com>
Date: Wed, 14 Aug 2024 11:51:12 -0400
Subject: [PATCH] added a progress bar

---
 .../components/export-excel/export-excel.tsx  |  5 ++--
 .../components/progress-bar/Progress-Bar.tsx  | 19 +++++++++++++
 app/src/output.css                            | 27 +++++++++++++++++++
 app/src/pages/FWACalculatorPage.tsx           |  2 +-
 4 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 app/src/components/progress-bar/Progress-Bar.tsx

diff --git a/app/src/components/export-excel/export-excel.tsx b/app/src/components/export-excel/export-excel.tsx
index 5b542e3..10cfff3 100644
--- a/app/src/components/export-excel/export-excel.tsx
+++ b/app/src/components/export-excel/export-excel.tsx
@@ -1,14 +1,13 @@
 import React from "react";
 import * as XLSX from "xlsx";
 import { saveAs } from "file-saver";
-import Button from "react-bootstrap/Button";
+import { Button } from "../button/Button";
 
 type ExcelDataProps = {
     excelData: any;
     fileName: string;
 };
 
-// FIXME: This needs a port to XLSX
 const ExportExcel: React.FC<ExcelDataProps> = p => {
     const { excelData, fileName } = p;
     console.log(excelData);
@@ -26,7 +25,7 @@ const ExportExcel: React.FC<ExcelDataProps> = p => {
 
     return (
         <>
-            <Button variant="success" size="lg" onClick={e => exportToExcel(fileName)} color="primary">
+            <Button variant="success" onClick={e => exportToExcel(fileName)}>
                 Export to Excel
             </Button>
         </>
diff --git a/app/src/components/progress-bar/Progress-Bar.tsx b/app/src/components/progress-bar/Progress-Bar.tsx
new file mode 100644
index 0000000..1cd540a
--- /dev/null
+++ b/app/src/components/progress-bar/Progress-Bar.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+type ProgressBarProps = {
+    now: number | undefined;
+};
+
+const ProgressBar: React.FC<ProgressBarProps> = p => {
+    const { now } = p;
+
+    return (
+        <>
+            <div className=" w-full h-5 rounded border-2 border-gray-600">
+                <div className="bg-green-500 h-full" style={{ width: now + "%" }} />
+            </div>
+        </>
+    );
+};
+
+export { ProgressBar };
diff --git a/app/src/output.css b/app/src/output.css
index 412fc88..eecf298 100644
--- a/app/src/output.css
+++ b/app/src/output.css
@@ -610,6 +610,14 @@ video {
   height: max-content;
 }
 
+.h-4 {
+  height: 1rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -623,6 +631,10 @@ video {
   width: fit-content;
 }
 
+.w-full {
+  width: 100%;
+}
+
 .list-decimal {
   list-style-type: decimal;
 }
@@ -652,6 +664,11 @@ video {
   border-color: rgb(48 54 61 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -672,6 +689,16 @@ video {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
+
 .stroke-\[\#8D96A0\] {
   stroke: #8D96A0;
 }
diff --git a/app/src/pages/FWACalculatorPage.tsx b/app/src/pages/FWACalculatorPage.tsx
index 18f4d61..5b8edcf 100644
--- a/app/src/pages/FWACalculatorPage.tsx
+++ b/app/src/pages/FWACalculatorPage.tsx
@@ -5,7 +5,7 @@ import { add_census_data_to_row } from "../utils/census";
 import { ExportExcel } from "../components/export-excel/export-excel";
 import { Button } from "../components/button/Button";
 import Form from "react-bootstrap/Form";
-import ProgressBar from "react-bootstrap/ProgressBar";
+import { ProgressBar } from "../components/progress-bar/Progress-Bar";
 
 type status = "" | "submitted" | "getting-geocode" | "parsing-geocode" | "getting-census" | "parsing-census" | "done";