preliminarily, some div scaffolding

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>
+  );
+}

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,
 };

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>
   );
 };