From 2c120ffaff651ff89dbc29a45b1fab87f5d76b10 Mon Sep 17 00:00:00 2001
From: Sergio <77530549+sergi0g@users.noreply.github.com>
Date: Mon, 9 Sep 2024 11:18:28 +0300
Subject: [PATCH] Added search

---
 build.sh                      |   6 ++++
 web/bun.lockb                 | Bin 117690 -> 117690 bytes
 web/src/App.tsx               |   5 +++-
 web/src/components/Search.tsx |  51 ++++++++++++++++++++++++++++++++++
 web/tailwind.config.js        |   5 ++--
 5 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/Search.tsx

diff --git a/build.sh b/build.sh
index 7a8710b..8c3b9e1 100755
--- a/build.sh
+++ b/build.sh
@@ -1,7 +1,13 @@
 #!/bin/sh
 
+# Exit on error
+set -e
+
 # This is kind of like a shim that makes sure the frontend is rebuilt when running a build. For example you can run `./build.sh cargo build --release`
 
+# Remove old files
+rm -rf src/static
+
 # Frontend
 cd web/
 
diff --git a/web/bun.lockb b/web/bun.lockb
index 998f07f5314705cae26f93e1aac57a1721646f4c..36929c2f93feeaec103a81a5137d09b421bced8c 100755
GIT binary patch
delta 25
hcmdlroqgAI_J%Et_Ll67afW&Zdgj~REE!8C0RV8{2lW5|

delta 25
dcmdlroqgAI_J%Et_Ll5S3}CR`&62TX5&&cT2BZK0

diff --git a/web/src/App.tsx b/web/src/App.tsx
index c9ded3b..e43ca65 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -7,9 +7,11 @@ import Loading from "./components/Loading";
 import { Data } from "./types";
 import { theme } from "./theme";
 import RefreshButton from "./components/RefreshButton";
+import Search from "./components/Search";
 
 function App() {
   const [data, setData] = useState<Data | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
   if (!data) return <Loading onLoad={setData} />;
   return (
     <div
@@ -41,10 +43,11 @@ function App() {
               <LastChecked datetime={data.last_updated} />
               <RefreshButton />
             </div>
+            <Search onChange={setSearchQuery}/>
             <ul
               className={`*:py-4 *:px-6 *:flex *:items-center *:gap-3 dark:divide-${theme}-800 divide-y dark:text-white`}
             >
-              {Object.entries(data.images).map(([name, status]) => (
+              {Object.entries(data.images).filter(([name]) => name.includes(searchQuery)).map(([name, status]) => (
                 <Image name={name} status={status} key={name} />
               ))}
             </ul>
diff --git a/web/src/components/Search.tsx b/web/src/components/Search.tsx
new file mode 100644
index 0000000..28e7a95
--- /dev/null
+++ b/web/src/components/Search.tsx
@@ -0,0 +1,51 @@
+import { ChangeEvent, useState } from "react";
+import { theme } from "../theme";
+import { IconSearch, IconX } from "@tabler/icons-react";
+
+export default function Search({
+  onChange,
+}: {
+  onChange: (value: string) => void;
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showClear, setShowClear] = useState(false);
+  const handleChange = (event: ChangeEvent) => {
+    const value = (event.target as HTMLInputElement).value;
+    setSearchQuery(value);
+    onChange(value);
+    if (value !== "") {
+      setShowClear(true);
+    } else setShowClear(false);
+  };
+  const handleClear = () => {
+    setShowClear(false);
+    setSearchQuery("");
+    onChange("");
+  };
+  return (
+    <div className={`w-full px-6 text-${theme}-500`}>
+      <div
+        className={`flex items-center w-full rounded-md border border-${theme}-200 dark:border-${theme}-700 px-2 gap-1 bg-${theme}-800 flex-nowrap peer`}
+      >
+        <IconSearch className="size-5" />
+        <div className="w-full">
+          <input
+            className={`w-full h-10 text-sm text-${theme}-400 focus:outline-none peer bg-transparent placeholder:text-${theme}-500`}
+            placeholder="Search"
+            onChange={handleChange}
+            value={searchQuery}
+          ></input>
+        </div>
+        {showClear && (
+          <button onClick={handleClear} className={`hover:text-${theme}-400`}>
+            <IconX className="size-5" />
+          </button>
+        )}
+      </div>
+      <div
+        className="relative -translate-y-[8px] h-[8px] border-b-blue-600 border-b-2 w-0 peer-has-[:focus]:w-full transition-all duration-200 rounded-md left-1/2 -translate-x-1/2"
+        style={{ clipPath: "inset(calc(100% - 2px) 0 0 0)" }}
+      ></div>
+    </div>
+  );
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index eefd6bd..8d292ac 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -24,10 +24,11 @@ export default {
     },
     {
       pattern: /text-(gray|neutral)-400/,
+      variants: ["hover"]
     },
     {
       pattern: /text-(gray|neutral)-500/,
-      variants: ["dark"],
+      variants: ["dark", "placeholder"],
     },
     {
       pattern: /divide-(gray|neutral)-800/,
@@ -37,7 +38,7 @@ export default {
       pattern: /border-(gray|neutral)-200/,
     },
     {
-      pattern: /border-(gray|neutral)-800/,
+      pattern: /border-(gray|neutral)-700/,
       variants: ["dark"],
     },
   ],