Vivid Code Gen

components/Arrow.tsx

@@ -0,0 +1,4 @@
+import arrow from "./arrow.svg";
+export const Arrow = ({ override }: { override?: React.CSSProperties }) => {
+  return <img className="w-[7px] h-[3px]" src={arrow.src} style={override} />;
+};

components/Divider.tsx

@@ -0,0 +1,7 @@
+export const Divider = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <div className="relative w-10 h-px" style={override}>
+      <div className="absolute left-[0%] right-[0%] w-full top-[0%] bottom-[0%] h-full bg-[rgb(217,_217,_217)]" />
+    </div>
+  );
+};

components/Dropdown.tsx

@@ -0,0 +1,110 @@
+import { Arrow } from "./Arrow";
+import { Option } from "./Option";
+import { Divider } from "./Divider";
+
+export const Dropdown = ({
+  override,
+  status,
+  text,
+}: {
+  override?: React.CSSProperties;
+  status: string;
+  text: string;
+}) => {
+  switch (status) {
+    case "Idle":
+      return (
+        <div
+          className="overflow-hidden flex justify-between items-center px-1.5 py-1 rounded-md w-40 h-7 border-solid border-neutral-300 border bg-[rgb(251,_251,_251)]"
+          style={override}
+        >
+          <p className="text-[rgb(70,_70,_70)] text-xs font-normal">{text}</p>
+          <Arrow />
+        </div>
+      );
+    case "Active":
+      return (
+        <div
+          className="flex flex-col justify-center items-center gap-[1px] rounded-md"
+          style={override}
+        >
+          <OverflowHiddenContainer text={text} />
+          <div
+            className="overflow-hidden flex flex-col justify-center items-center rounded-md w-full border-solid border-[rgb(226,_226,_226)] border bg-white"
+            style={{
+              boxShadow: "0px 0px 16px rgba(0, 0, 0, 0.15)",
+            }}
+          >
+            <NotStarted />
+            <Divider
+              override={{
+                height: "1px",
+                width: "100%",
+              }}
+            />
+            <AiChatDisclaimer />
+            <Divider
+              override={{
+                height: "1px",
+                width: "100%",
+              }}
+            />
+            <FAQChat />
+          </div>
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+const OverflowHiddenContainer = ({ text }: any) => (
+  <div className="overflow-hidden flex justify-between items-center px-1.5 py-1 rounded-md w-40 h-7 border-solid border-neutral-300 border bg-[rgb(246,_246,_246)]">
+    <p className="text-[rgb(70,_70,_70)] text-xs font-normal">{text}</p>
+    <Arrow
+      override={{
+        height: "3px",
+        width: "7px",
+      }}
+    />
+  </div>
+);
+
+const NotStarted = () => (
+  <Option
+    color="Gray"
+    text="Not Started"
+    override={{
+      height: "fit-content",
+      width: "100%",
+      justifyContent: "flex-start",
+      alignItems: "flex-start",
+    }}
+  />
+);
+
+const AiChatDisclaimer = () => (
+  <Option
+    color="Orange"
+    text="Ongoing"
+    override={{
+      height: "fit-content",
+      width: "100%",
+      justifyContent: "flex-start",
+      alignItems: "flex-start",
+    }}
+  />
+);
+
+const FAQChat = () => (
+  <Option
+    color="Green"
+    text="Completed"
+    override={{
+      height: "fit-content",
+      width: "100%",
+      justifyContent: "flex-start",
+      alignItems: "flex-start",
+    }}
+  />
+);

components/DropdownPage.tsx

@@ -0,0 +1,16 @@
+import { Dropdown } from "./Dropdown";
+export const DropdownPage = ({
+  override,
+}: {
+  override?: React.CSSProperties;
+}) => {
+  return (
+    <Dropdown
+      status="Idle"
+      text="Select..."
+      override={{
+        width: "100%",
+      }}
+    />
+  );
+};

components/Option.tsx

@@ -0,0 +1,39 @@
+export const Option = ({
+  override,
+  color,
+  text,
+}: {
+  override?: React.CSSProperties;
+  color: string;
+  text: string;
+}) => {
+  const badgeColor = {
+    Gray: {
+      borderColor: "rgb(226, 226, 226)",
+      backgroundColor: "rgb(251, 251, 251)",
+    },
+    Orange: {
+      borderColor: "rgb(246, 215, 186)",
+      backgroundColor: "rgb(249, 230, 212)",
+    },
+    Green: {
+      borderColor: "rgb(168, 245, 197)",
+      backgroundColor: "rgb(199, 250, 218)",
+    },
+  }[color];
+  return (
+    <div
+      className="overflow-hidden flex flex-col items-start px-2 py-1 w-[95px] bg-white"
+      style={override}
+    >
+      <div
+        className="overflow-hidden flex justify-center items-center px-1.5 py-1 rounded border-solid border"
+        style={{
+          ...badgeColor,
+        }}
+      >
+        <p className="text-[rgb(46,_46,_46)] text-xs font-normal">{text}</p>
+      </div>
+    </div>
+  );
+};