Filter on services

web/src/App.tsx

@@ -50,6 +50,36 @@ function LinkList({ links }: { links: Link[] }) {
   );
 }
 
+function ServiceList({
+  services,
+  refresh,
+}: {
+  services: Service[];
+  refresh: () => void;
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredServices = services.filter((s) =>
+    s.name.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Type here"
+        className="input"
+        value={searchQuery}
+        onInput={(e) => setSearchQuery(e.currentTarget.value)}
+      />
+      <div class="grid gap-3 mt-4 md:grid-cols-2 lg:grid-cols-3">
+        {filteredServices.map((s) => (
+          <ServiceCard key={s.name} s={s} refresh={refresh} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export function App() {
   const [content, setContent] = useState<{
     links: Link[];
@@ -135,14 +165,7 @@ export function App() {
         )}
         {category === "exec" && content.exec.map((it) => <ScriptCard s={it} />)}
         {category === "services" && (
-          <div>
+          <ServiceList services={content.services} refresh={refresh} />
-            <input type="text" placeholder="Type here" className="input" />
-            <div class="grid gap-3 mt-4 md:grid-cols-2 lg:grid-cols-3">
-              {content.services.map((s) => (
-                <ServiceCard s={s} refresh={refresh} />
-              ))}
-            </div>
-          </div>
         )}
         {category === "docs" &&
           (open ? (