feat: add SearchInput to ui-lib

app/components/ui-lib.tsx

@@ -275,6 +275,20 @@ export function PasswordInput(props: HTMLProps<HTMLInputElement>) {
   );
 }
 
+export function SearchInput(props: HTMLProps<HTMLInputElement>) {
+  const [visible, setVisible] = useState(false);
+
+  function changeVisibility() {
+    setVisible(!visible);
+  }
+
+  return (
+    <div className={"search-input-container"}>
+      <input {...props} type="text" className={"search-input"} />
+    </div>
+  );
+}
+
 export function Select(
   props: React.DetailedHTMLProps<
     React.SelectHTMLAttributes<HTMLSelectElement>,

app/styles/globals.scss

@@ -339,6 +339,16 @@ pre {
   }
 }
 
+.search-input-container {
+  display: flex;
+  justify-content: center;
+
+  .search-input {
+    min-width: 99%;
+    text-align: left;
+  }
+}
+
 .user-avatar {
   height: 30px;
   min-height: 30px;