From 31d436cc7e771edf0d901c525c96477b400e27be Mon Sep 17 00:00:00 2001
From: Andision <andision@outlook.com>
Date: Fri, 1 Dec 2023 04:08:24 +0000
Subject: [PATCH] feat: add SearchInput to ui-lib

---
 app/components/ui-lib.tsx | 14 ++++++++++++++
 app/styles/globals.scss   | 10 ++++++++++
 2 files changed, 24 insertions(+)

diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index f7e326fd3..746205e51 100644
--- a/app/components/ui-lib.tsx
+++ b/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>,
diff --git a/app/styles/globals.scss b/app/styles/globals.scss
index aa22b7d4f..e63f5d57b 100644
--- a/app/styles/globals.scss
+++ b/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;