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>

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
+        <SearchResult result={data.result} origin={data.origin} />
-          ? (
-            <div className="w-full mx-auto my-4 space-y-4">
-              {data.result.map((result) => (
-                <SeriesCard
-                  serie={result}
-                  origin={data.origin}
-                />
-              ))}
-            </div>
-          )
-          : null}
         <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>
+  );
+}