search input component

components/Layout/Layout.module.css

@@ -20,6 +20,6 @@
 }
 
 .container {
-  padding: 2rem;
+  padding: 1.5rem;
   flex: 1;
 }

components/Navigation.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
+import SearchInput from "components/SearchInput";
+
 const mockedAccounts = [
   {
     label: "Subaccount 1",
@@ -58,16 +60,17 @@ const Navigation = () => (
     </div>
     {/* Sub navigation bar */}
     <div className="flex justify-between px-6 py-3 text-sm text-white/40">
-      <div className="flex">
+      <div className="flex items-center">
+        <SearchInput />
         {mockedAccounts.map((account, index) => (
-          <div key={index} className="px-4">
+          <div key={index} className="px-4 hover:text-white cursor-pointer">
             {account.label}
           </div>
         ))}
-        <div className="px-3 ">More</div>
+        <div className="px-3">More</div>
         <div className="px-3">Manage</div>
       </div>
-      <div className="flex gap-4">
+      <div className="flex gap-4 items-center">
         <p>$: 2500</p>
         <div>Lvg Gauge</div>
         <div>Risk Gauge</div>

components/SearchInput.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+const SearchInput = () => (
+  <div className="relative text-white">
+    <span className="absolute inset-y-0 left-0 flex items-center pl-2">
+      <svg
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        className="w-6 h-6"
+      >
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+      </svg>
+    </span>
+    <input
+      className="py-2 text-sm text-white bg-black/70 rounded-md pl-10 focus:outline-none"
+      placeholder="Search"
+    />
+  </div>
+);
+
+export default SearchInput;