import modal created

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+import { DocumentDuplicateIcon } from "@heroicons/react/solid";
+import { classNames } from "../../../utils";
+
+export default function ButtonBox({
+	onClick,
+	title,
+	description,
+	icon,
+	bgColor,
+	textColor,
+}: {
+	onClick: () => void;
+	title: string;
+	description: string;
+	icon: ReactNode;
+	bgColor: string;
+	textColor: string;
+}) {
+	return (
+		<button onClick={onClick}>
+			<div
+				className={classNames(
+					"col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow border border-gray-300 hover:shadow-lg transform hover:scale-105",
+					bgColor
+				)}
+			>
+				<div className="flex flex-1 flex-col p-8">
+					<div className="mx-auto flex items-center justify-center h-20 w-20 bg-white/30 rounded-full">
+						<div className="mx-auto flex items-center justify-center h-16 w-16 bg-white rounded-full">
+                            <div className={textColor}>
+                                {icon}
+                            </div>
+						</div>
+					</div>
+					<h3 className="mt-6 text-lg font-semibold text-white">{title}</h3>
+					<div className="mt-1 flex flex-grow flex-col justify-between">
+						<dt className="sr-only">{title}</dt>
+						<dd className="text-sm text-gray-100">{description}</dd>
+					</div>
+				</div>
+			</div>
+		</button>
+	);
+}

src/frontend/src/modals/importModal/index.tsx

@@ -0,0 +1,118 @@
+import { Dialog, Transition } from "@headlessui/react";
+import {
+	XMarkIcon,
+	ArrowDownTrayIcon,
+	DocumentDuplicateIcon,
+    ComputerDesktopIcon,
+} from "@heroicons/react/24/outline";
+import { Fragment, useContext, useRef, useState } from "react";
+import { PopUpContext } from "../../contexts/popUpContext";
+import ButtonBox from "./buttonBox";
+
+export default function ImportModal() {
+	const [open, setOpen] = useState(true);
+	const { closePopUp } = useContext(PopUpContext);
+	const ref = useRef();
+	function setModalOpen(x: boolean) {
+		setOpen(x);
+		if (x === false) {
+			setTimeout(() => {
+				closePopUp();
+			}, 300);
+		}
+	}
+	return (
+		<Transition.Root show={open} appear={true} as={Fragment}>
+			<Dialog
+				as="div"
+				className="relative z-10"
+				onClose={setModalOpen}
+				initialFocus={ref}
+			>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
+				>
+					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+				</Transition.Child>
+
+				<div className="fixed inset-0 z-10 overflow-y-auto">
+					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enterTo="opacity-100 translate-y-0 sm:scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+									<button
+										type="button"
+										className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+										onClick={() => {
+											setModalOpen(false);
+										}}
+									>
+										<span className="sr-only">Close</span>
+										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
+									</button>
+								</div>
+								<div className="h-full w-full flex flex-col justify-center items-center">
+									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+											<ArrowDownTrayIcon
+												className="h-6 w-6 text-blue-600"
+												aria-hidden="true"
+											/>
+										</div>
+										<div className="mt-4 text-center sm:ml-4 sm:text-left">
+											<Dialog.Title
+												as="h3"
+												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+											>
+												Import from
+											</Dialog.Title>
+										</div>
+									</div>
+									<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+										<div className="flex h-full w-full justify-evenly items-center">
+											<ButtonBox
+												bgColor="bg-blue-500"
+												description="Prebuilt Examples"
+												icon={
+													<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
+												}
+												onClick={() => console.log("sdsds")}
+												textColor="text-blue-500"
+												title="Examples"
+											></ButtonBox>
+											<ButtonBox
+												bgColor="bg-blue-500"
+												description="Import from Local"
+												icon={
+													<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
+												}
+												onClick={() => console.log("sdsds")}
+												textColor="text-blue-500"
+												title="Local file"
+											></ButtonBox>
+										</div>
+									</div>
+
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
+}

src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx

@@ -14,9 +14,11 @@ import {
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import AlertDropdown from "../../../../alerts/alertDropDown";
 import { alertContext } from "../../../../contexts/alertContext";
+import ImportModal from "../../../../modals/importModal";
 
 export default function TabsManagerComponent() {
-	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = useContext(TabsContext);
+	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } =
+		useContext(TabsContext);
 	const { openPopUp } = useContext(PopUpContext);
 	const AlertWidth = 256;
 	const { dark, setDark } = useContext(darkContext);
@@ -50,10 +52,21 @@ export default function TabsManagerComponent() {
 					flow={null}
 				/>
 				<div className="ml-auto mr-2 flex gap-3">
-					<button onClick={() => uploadFlow()} className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-400 hover:text-gray-500">
+					<button
+						onClick={() =>
+							openPopUp(
+								<ImportModal
+								/>
+							)
+						}
+						className="flex items-center gap-1 pr-2 border-gray-400 border-r text-sm text-gray-400 hover:text-gray-500"
+					>
 						Import <ArrowUpTrayIcon className="w-5 h-5" />
 					</button>
-					<button onClick={() => downloadFlow()} className="flex items-center gap-1 mr-2 text-sm text-gray-400 hover:text-gray-500">
+					<button
+						onClick={() => downloadFlow()}
+						className="flex items-center gap-1 mr-2 text-sm text-gray-400 hover:text-gray-500"
+					>
 						Export <ArrowDownTrayIcon className="h-5 w-5" />
 					</button>
 					<button

src/frontend/src/utils.ts

@@ -341,3 +341,4 @@ export function isValidConnection(
   }
   return false;
 }
+