refactor(layout component + sub components): refactor layout - extract sidebar, search etc (#11)

Extract Sidebar, search, userDropdown, Notifications from Layout component

src/components/Search/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const Search: React.FC = () => {
+  return (
+    <div className="flex-1 flex">
+      <form className="w-full flex md:ml-0" action="#" method="GET">
+        <label htmlFor="search_field" className="sr-only">
+          Search
+        </label>
+        <div className="relative w-full text-gray-400 focus-within:text-gray-600">
+          <div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
+            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+              />
+            </svg>
+          </div>
+          <input
+            id="search_field"
+            className="block w-full h-full pl-8 pr-3 py-2 rounded-md text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
+            placeholder="Search"
+            type="search"
+          />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default Search;