Feat/top bar

dashboard/src/components/Dashboard/Dashboard.tsx

@@ -1,12 +1,14 @@
 import SideMenu from "../SideMenu/SideMenu";
 import TreeTable from "../Table/TreeTable";
+import TopBar from "../TopBar/TopBar";
 
 const Dashboard = () : JSX.Element => {
   return (
     <div className="w-full h-full">
       <div className="flex flex-row w-full justify-between">
         <SideMenu />
-        <div className="w-full px-16 pt-64">
+        <TopBar />
+        <div className="w-full px-16 pt-64 bg-lightGray">
           <TreeTable />
         </div>
       </div>

dashboard/src/components/SideMenu/SideMenu.tsx

@@ -25,25 +25,25 @@ const emptyFunc = () : void => {}
 const items: MenuItems[] = [
   {
     onClick: emptyFunc,
-    idIntl: "lateralMenu.dashboard",
+    idIntl: "routes.dashboard",
     icon: <MdOutlineDashboard className="size-5" />,
     selected: false,
   },
   {
     onClick: emptyFunc,
-    idIntl: "lateralMenu.treeMonitor",
+    idIntl: "routes.treeMonitor",
     icon: <ImTree className="size-5" />,
     selected: true,
   },
   {
     onClick: emptyFunc,
-    idIntl: "lateralMenu.deviceMonitor",
+    idIntl: "routes.deviceMonitor",
     icon: <MdOutlineMonitorHeart className="size-5" />,
     selected: false,
   },
   {
     onClick: emptyFunc,
-    idIntl: "lateralMenu.labsMonitor",
+    idIntl: "routes.labsMonitor",
     icon: <ImImages className="size-5" />,
     selected: false,
   },

dashboard/src/components/TopBar/TopBar.tsx

@@ -0,0 +1,21 @@
+import { FormattedMessage } from "react-intl";
+
+import { Input } from "../ui/input";
+
+const TopBar = (): JSX.Element => {
+  return (
+    <div className="flex fixed top-0 h-20 mx-52 pl-6 pr-12 bg-white w-full">
+      <div className="flex flex-row w-full items-center justify-between">
+        <span className="text-2xl ">
+          <FormattedMessage id="routes.treeMonitor" />
+        </span>
+        <div className="flex w-2/3 px-6 items-center">
+          {/* placeholder for search */}
+          <Input className="w-2/3" type="text" placeholder="Search" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TopBar;

dashboard/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

dashboard/src/locales/messages/index.ts

@@ -2,7 +2,7 @@ import {LOCALES} from '../constants'
 
 export const messages = {
   [LOCALES.EN_US]: {
-    lateralMenu: {
+    routes: {
       dashboard: "Dashboard",
       treeMonitor: "Tree Monitor",
       deviceMonitor: "Device Monitor",