added a progress bar

teenageknight · Aug 14, 2024 · ae646fc · ae646fc
1 parent a38abf4
commit ae646fc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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";