feat: add Top Bar component

Closes #18

dashboard/src/App.tsx

@@ -1,11 +1,20 @@
 import "./App.css";
 import LateralMenu from "./components/SideMenu/SideMenu";
+import TopBar from "./components/TopBar/TopBar";
 
 function App(): JSX.Element {
   return (
     <>
       <div className="w-screen h-screen">
-        <LateralMenu />
+        <div className="w-full h-full">
+
+          <div className="flex flex-row w-full bg-bg">
+
+            <LateralMenu />
+            <TopBar />
+            <div className="w-full px-16 pt-64"></div>
+          </div>
+        </div>
       </div>
     </>
   );

dashboard/src/components/TopBar/TopBar.tsx

@@ -0,0 +1,22 @@
+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>{/* space to put icons on future */}</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/tailwind.config.js

@@ -32,6 +32,7 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
       colors: {
+        'bg': '#F4F4F4',
         'bgSecondary' : '#343638',
         'onSecondary' : '#FFFFFF',
         'lightBlue': '#11B3E6',