added components

frontend/src/app/components/searchbar/SearchBar.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import searchBarStyle from "./styles.module.css";
+
+const SearchBar = () => {
+  return (
+    <form className={searchBarStyle.searchBarContainer}>
+      <input
+        className={searchBarStyle.input}
+        type="text"
+        name=""
+        id=""
+        placeholder="Search"
+      />
+      <div className={searchBarStyle.icon}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={24}
+          height={24}
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path
+            d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
+            stroke="#858699"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+    </form>
+  );
+};
+
+export default SearchBar;

frontend/src/app/components/searchbar/styles.module.css

@@ -0,0 +1,46 @@
+.searchBarContainer {
+  display: flex;
+  width: 260px;
+  justify-content: space-between;
+  padding: 6px 6px 6px 12px;
+
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid #31324a;
+
+  border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
+}
+.searchBarContainer > .input {
+  background-color: red;
+  outline: none;
+  border: none;
+  width: 100%;
+
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+  caret-color: #575bc7;
+}
+
+.input::placeholder {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  text-align: start;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}