feat(Header): create new file button (#29)

src/app/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { BiSolidBook } from "react-icons/bi";
 import { MdDownload } from "react-icons/md";
 import AutoLayoutSwitch from "./AutoLayoutSwitch";
 import SaveLoadFileButton from "./SaveLoadFileButton";
+import NewDiagramButton from "./NewDiagramButton";
 
 const PROJECT_GITHUB = "https://github.com/matias-lg/er";
 
@@ -43,14 +44,16 @@ export const Header = () => {
 
   return (
     <>
-      <div className="flex h-full w-[65%]  items-center pl-6  text-slate-200">
+      <div className="flex h-full w-[63%]  items-center pl-6  text-slate-200">
         ERdoc Playground
       </div>
       <div className=" flex h-full w-[90%] items-center pl-2 text-slate-200">
         <HeaderElement className="border-l-[1px]">
-          <>
-            <AutoLayoutSwitch title={t("autoLayout")} />
-          </>
+          <AutoLayoutSwitch title={t("autoLayout")} />
+        </HeaderElement>
+
+        <HeaderElement className="border-l-[1px]">
+          <NewDiagramButton />
         </HeaderElement>
 
         <HeaderElement className="border-l-[1px]">

src/app/components/Header/NewDiagramButton.tsx

@@ -0,0 +1,60 @@
+"use client";
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { Context } from "../../context";
+import { useMonaco } from "@monaco-editor/react";
+import { useContext } from "react";
+import { useTranslations } from "next-intl";
+import { LuFilePlus } from "react-icons/lu";
+
+const NewDiagramButton = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { setLoadedDiagramFromOutside } = useContext(Context);
+  const monaco = useMonaco();
+  const t = useTranslations("home.header.newDiagram");
+
+  const onModalButtonClick = () => {
+    // we want to trigger a diagram update event in this case
+    setLoadedDiagramFromOutside(false);
+    const codeEditorModel = monaco?.editor.getModels()[0];
+    codeEditorModel?.setValue("");
+    onClose();
+  };
+
+  return (
+    <>
+      <button className="flex items-center" onClick={onOpen}>
+        <LuFilePlus size={25} /> <span className="pl-2">{t("title")}</span>
+      </button>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{t("modalTitle")}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>{t("modalDescription")}</ModalBody>
+          <ModalFooter>
+            <Button
+              variant="outline"
+              colorScheme="gray"
+              onClick={onModalButtonClick}
+            >
+              {t("modalConfirm")}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default NewDiagramButton;

src/locales/en.json

@@ -20,6 +20,14 @@
         "description": "Load an existing ER Diagram and ERDoc from a JSON file. This will replace the current ER Diagram.",
         "upload": "Upload JSON file"
       },
+
+      "newDiagram": {
+        "title": "New Diagram",
+        "modalTitle": "Create a new ER diagram",
+        "modalDescription": "Start a new ER diagram from scratch. This will delete the current diagram",
+        "modalConfirm": "Confirm"
+      },
+
       "autoLayout": "Auto Layout",
       "exportDiagram": "Export Diagram",
       "asJSON": "Export as JSON",
@@ -44,7 +52,6 @@
       "subclass": "Subclass",
       "aggregation": "Aggregation",
       "roles": "Roles"
-
     },
 
     "erDiagram": {