From 754cfceab6d11286315bbfb55b6175e8585c7b04 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 5 Jul 2023 16:04:42 -0300
Subject: [PATCH] feat(twoColumnsModal): add TwoColumnsModal component to
 display a modal with two columns

The TwoColumnsModal component is added to display a modal with two columns. It takes the following props:
- title: the title of the modal
- description: the description of the modal
- open: a boolean indicating whether the modal is open or not
- setOpen: a function to set the open state of the modal

The component renders a Dialog component from the ui/dialog module. It consists of a DialogTrigger, DialogContent, DialogHeader, DialogTitle, and DialogDescription. The DialogContent has a minimum width of 80vw.

Inside the DialogContent, there is a flex container with a height of 80vh and width of 100%. It contains two divs: one with a width of 2/5 and the other with a width of the remaining space.

The TwoColumnsModal component also exports two additional components: first and second. These components can be used as children of the TwoColumnsModal component to render content in the first and second columns, respectively.
---
 .../src/modals/twoColumnsModal/index.tsx      | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/frontend/src/modals/twoColumnsModal/index.tsx

diff --git a/src/frontend/src/modals/twoColumnsModal/index.tsx b/src/frontend/src/modals/twoColumnsModal/index.tsx
new file mode 100644
index 000000000..6e0628a74
--- /dev/null
+++ b/src/frontend/src/modals/twoColumnsModal/index.tsx
@@ -0,0 +1,93 @@
+import { useContext, useEffect, useRef, useState } from "react";
+import { FlowType } from "../../types/flow";
+import { alertContext } from "../../contexts/alertContext";
+import { classNames, validateNodes } from "../../utils";
+import { typesContext } from "../../contexts/typesContext";
+import {
+    TerminalSquare,
+    MessageSquare,
+    Variable,
+    Eraser,
+    MessageSquarePlus,
+} from "lucide-react";
+import { sendAllProps } from "../../types/api";
+import { ChatMessageType } from "../../types/chat";
+
+import _ from "lodash";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "../../components/ui/dialog";
+import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants";
+import { Label } from "../../components/ui/label";
+import { TabsContext } from "../../contexts/tabsContext";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "../../components/ui/accordion";
+import { Textarea } from "../../components/ui/textarea";
+import { Badge } from "../../components/ui/badge";
+import ToggleShadComponent from "../../components/toggleShadComponent";
+import Dropdown from "../../components/dropdownComponent";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+import { Button } from "../../components/ui/button";
+
+export default function TwoColumnsModal({
+    title,
+    description,
+    open,
+    setOpen,
+}: {
+    description: string;
+    title: string;
+    open: boolean;
+    setOpen: Function;
+}) {
+    const isOpen = useRef(open);
+    useEffect(() => {
+        isOpen.current = open;
+    }, [open]);
+
+    function setModalOpen(x: boolean) {
+        setOpen(x);
+    }
+    //UPDATE COLORS AND STYLE CLASSSES
+    return (
+        <Dialog open={open} onOpenChange={setModalOpen}>
+            <DialogTrigger className="hidden"></DialogTrigger>
+            <DialogContent className="min-w-[80vw]">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center">
+                        <span className="pr-2">{title}</span>
+                        <TerminalSquare
+                            className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+                            aria-hidden="true"
+                        />
+                    </DialogTitle>
+                    <DialogDescription>{description}</DialogDescription>
+                </DialogHeader>
+
+                <div className="flex h-[80vh] w-full mt-2 ">
+                    <div className="w-2/5 h-full">
+                    </div>
+                    <div className="w-full">
+                    </div>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+
+}
+TwoColumnsModal.first = ({children})=><div>{children}</div>
+TwoColumnsModal.second = ({children})=><div>{children}</div>