feat: add minimal layout

src/App.js

@@ -18,7 +18,7 @@ import {
 import { getUser } from "./api/auth";
 import { AuthContext } from "./context";
 import { Loading } from "./components/Loading";
-import { Toast, ToastContext, ToastProvider } from "./components/Toast/toast";
+import { Toast, ToastContext } from "./components/Toast/toast";
 
 export const navigation = [
   {

src/components/Layout/index.js

@@ -1,4 +1,5 @@
 import { SearchLayout } from "./search";
+import { MinimalLayout } from "./minimal";
 import SidebarLayout from "./sidebar";
 
-export { SearchLayout, SidebarLayout };
+export { SearchLayout, SidebarLayout, MinimalLayout };

src/components/Layout/minimal.js

@@ -0,0 +1,26 @@
+import { UserProfile } from "../UserProfile/user-profile";
+
+export function MinimalLayout({ children, title }) {
+  return (
+    <div>
+      <div className="md:pl-64 flex flex-col flex-1">
+        <div className="sticky top-0 z-10 flex-shrink-0 flex h-16 bg-white shadow">
+          <div className="flex-1 px-4 flex justify-between">
+            <div className="flex items-center">
+              <div>{title}</div>
+            </div>
+            <div className="ml-4 flex items-center md:ml-6">
+              <UserProfile />
+            </div>
+          </div>
+        </div>
+
+        <main>
+          <div className="py-6 max-w-screen-lg mx-auto">
+            <div className="mx-auto px-4 sm:px-6 md:px-8">{children}</div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

src/pages/incident/incident-create.js

@@ -0,0 +1,10 @@
+import { IncidentCreate } from "../../components/Incidents/IncidentCreate";
+import { MinimalLayout } from "../../components/Layout";
+
+export function IncidentCreatePage() {
+  return (
+    <MinimalLayout title="Create Incident">
+      <IncidentCreate />
+    </MinimalLayout>
+  );
+}

src/pages/incident/incident-list.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { getAllIncident } from "../../../api/services/incident";
-import { IncidentCreate } from "../../../components/Incidents/IncidentCreate";
-import { IncidentList } from "../../../components/Incidents/IncidentList";
-import { Modal } from "../../../components/Modal";
+import { getAllIncident } from "../../api/services/incident";
+import { IncidentCreate } from "../../components/Incidents/IncidentCreate";
+import { IncidentList } from "../../components/Incidents/IncidentList";
+import { Modal } from "../../components/Modal";
 
 export function IncidentListPage() {
   const navigate = useNavigate();

src/pages/index.js

@@ -1,6 +1,13 @@
 import { IncidentDetailsPage } from "./incident/incident-details";
 import { IncidentListPage } from "./incident/incident-list";
+import { IncidentCreatePage } from "./incident/incident-create";
 import { LogsPage } from "./logs-page";
 import { TopologyPage } from "./topology-page";
 
-export { LogsPage, TopologyPage, IncidentDetailsPage, IncidentListPage };
+export {
+  LogsPage,
+  TopologyPage,
+  IncidentDetailsPage,
+  IncidentListPage,
+  IncidentCreatePage
+};