From 96869502c3033f857ce68f0f6d9a58e83c8f30a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20H=C3=A5rek=20Andreassen?= <tim@harek.no>
Date: Sat, 30 Mar 2024 16:33:21 +0100
Subject: [PATCH] style: Give better feedback for a search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tim Hårek Andreassen <tim@harek.no>
---
 components/SeriesCard.tsx |  2 +-
 routes/index.tsx          | 33 +++++++++++++++++++++------------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/components/SeriesCard.tsx b/components/SeriesCard.tsx
index 0dae82e..50ed1b9 100644
--- a/components/SeriesCard.tsx
+++ b/components/SeriesCard.tsx
@@ -7,7 +7,7 @@ export default function SeriesCard(props: { serie: SearchResult; origin: string
   return (
     <div className="border-2 border-blue-800 p-4 rounded-lg bg-blue-400">
       <div className="mx-auto h-full w-full space-y-2">
-        <h2 className="text-xl font-semibold">{props.serie.title}</h2>
+        <h3 className="text-xl font-semibold">{props.serie.title}</h3>
         <p className="text-md">{props.serie.description}</p>
         <img src={image.uri} width={image.width} alt="" />
         <code className="font-mono bg-black text-white select-all p-2">{feedUrl.toString()}</code>
diff --git a/routes/index.tsx b/routes/index.tsx
index 024dd56..1d04993 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -46,18 +46,7 @@ export default function Home({ data }: PageProps<HandlerData>) {
       <div className="p-4 mx-auto max-w-screen-md">
         <Header />
         <Search defaultValue={data.query} />
-        {data.result
-          ? (
-            <div className="w-full mx-auto my-4 space-y-4">
-              {data.result.map((result) => (
-                <SeriesCard
-                  serie={result}
-                  origin={data.origin}
-                />
-              ))}
-            </div>
-          )
-          : null}
+        <SearchResult result={data.result} origin={data.origin} />
         <div
           class="markdown-body"
           dangerouslySetInnerHTML={{ __html: render(data?.rawMarkdown) }}
@@ -67,3 +56,23 @@ export default function Home({ data }: PageProps<HandlerData>) {
     </>
   );
 }
+
+function SearchResult({ result, origin }: { result: SearchResultList; origin: string }) {
+  if (!result) {
+    return null;
+  }
+  if (result.length === 0) {
+    return <h2 className="text-2xl font-semibold mb-8">Ingen resultater</h2>;
+  }
+  return (
+    <div className="w-full mx-auto my-4 space-y-4">
+      <h2 className="text-2xl font-semibold">Søkeresultat: {result.length} treff</h2>
+      {result.map((result) => (
+        <SeriesCard
+          serie={result}
+          origin={origin}
+        />
+      ))}
+    </div>
+  );
+}