From d73e2d14445b7d152f6e451cdaa7ae05d922f0a9 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Wed, 27 Mar 2024 15:59:43 -0400
Subject: [PATCH] preliminarily, some div scaffolding

---
 app/components/LoadingBar.tsx   | 47 +++++++++++++++++++++++++++++++++
 app/components/index.tsx        |  2 ++
 app/routes/ComponentLibrary.tsx | 34 +++++++++++++++++++-----
 3 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 app/components/LoadingBar.tsx

diff --git a/app/components/LoadingBar.tsx b/app/components/LoadingBar.tsx
new file mode 100644
index 0000000000..cf2969c641
--- /dev/null
+++ b/app/components/LoadingBar.tsx
@@ -0,0 +1,47 @@
+import { twMerge } from 'tailwind-merge';
+import { H4 } from '.';
+
+interface LoadingBarProps{
+  label?: string;
+  progress?: number;
+  variant?: string;
+  pulsing?: boolean;
+  message?: string;
+}
+export const LoadingBar = ({
+  label,
+  progress = 50,
+  variant = 'primary',
+  pulsing = false,
+  message,
+}: LoadingBarProps) => {
+
+  function getVariantClassNames(variant: string) {
+    switch (variant) {
+      case "secondary": {
+        return " bg-brand-secondary text-white ";
+      }
+      case "primary":
+      default: {
+        return " bg-brand-primary text-white ";
+      }
+    }
+  }
+  const progressClassName = twMerge(
+    "h-2.5 rounded-full",
+    getVariantClassNames(variant),
+  );
+
+  return (
+    <div className="w-full h-full flex flex-row justify-center items-center bg-ui-background ">
+      {label && <label>{label}</label>}
+      <div className="w-full bg-gray-200 rounded-full h-2.5">
+        <div 
+          className={progressClassName} 
+          style={{width: progress + '%'}}
+        />
+      </div>
+      {message && <H4>{message}</H4>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/components/index.tsx b/app/components/index.tsx
index 28c7eb3efc..2065c8c20c 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -6,6 +6,7 @@ import { Input } from "./Input";
 import { H4 } from "./H4";
 import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
+import { LoadingBar } from "./LoadingBar";
 import { LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 
 export {
@@ -17,6 +18,7 @@ export {
   ItemPicker,
   Textarea,
   Input,
+  LoadingBar,
   LoadingDotsBricks,
   LoadingDotsTyping,
 };
diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx
index 41bbfb7f8d..54814f8451 100644
--- a/app/routes/ComponentLibrary.tsx
+++ b/app/routes/ComponentLibrary.tsx
@@ -1,11 +1,33 @@
-import { Button } from "~/components/Button";
-import { ButtonLink } from "~/components/ButtonLink";
+import { 
+  Button,
+  ButtonLink,
+  H4, 
+  LoadingBar
+} from "~/components";
+
 
 export default function ComponentLibrary () {
   return(
-  <>
-    <Button>Button</Button>
-    <ButtonLink to="/">Button with Link</ButtonLink>
-  </>
+    <div className='bg-ui-panel w-10/12 max-w-7xl h-full min-h-96 mx-auto my-6 rounded-lg p-6'>
+
+      <div className="flex flex-col gap-2 mb-4">
+        <H4>Buttons</H4>
+        <div className="flex gap-2">
+          <Button>Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button disabled>Disabled</Button>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2 mb-4">
+        <H4>ButtonLink</H4>
+        <ButtonLink to="/">Back to /</ButtonLink>
+      </div>
+
+      <div className="flex flex-col gap-2 mb-4">
+        <H4>Loading Bar</H4>
+        <LoadingBar />
+      </div>
+    </div>
   );
 };
\ No newline at end of file