From e98aa722bb5195ce67dc43196aa750fab41e47a5 Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Fri, 9 Aug 2024 15:46:31 +0200
Subject: [PATCH] search: add results counter with styling

---
 web/src/components/search/SearchContainer.tsx         |  3 ++-
 web/src/components/search/searchContainer.module.scss | 10 +++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/components/search/SearchContainer.tsx b/web/src/components/search/SearchContainer.tsx
index 6102efc..c8ba950 100644
--- a/web/src/components/search/SearchContainer.tsx
+++ b/web/src/components/search/SearchContainer.tsx
@@ -55,7 +55,7 @@ const PAGE_TYPES: Record<string, string> = {
 
 function SearchResults({ results }: { results: any }) {
   if (!results.length) {
-    return <div>Ingen resultater 😔</div>;
+    return <div className={styles.noResults}>Ingen resultater</div>;
   }
   const supportedResults = results.filter(
     (result: any) =>
@@ -63,6 +63,7 @@ function SearchResults({ results }: { results: any }) {
   );
   return (
     <div>
+      <p className={styles.resultsCounter}>{results.length} resultater</p>
       {supportedResults.map((result: any) => {
         let resultType = PAGE_TYPES[result.__typename] ?? "";
         if (result.__typename === "AssociationPage") {
diff --git a/web/src/components/search/searchContainer.module.scss b/web/src/components/search/searchContainer.module.scss
index 3ba4362..2eeee30 100644
--- a/web/src/components/search/searchContainer.module.scss
+++ b/web/src/components/search/searchContainer.module.scss
@@ -1,6 +1,6 @@
 .searchContainer {
   max-width: var(--size-width-lead);
-  margin: 0 auto;
+  margin: 0 auto var(--spacing-section-bottom);
 }
 
 .searchField {
@@ -36,4 +36,12 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 1em;
+}
+
+.resultsCounter {
+  margin: var(--spacing-s) 0;
+}
+
+.noResults {
+  margin: var(--spacing-s) 0 var(--spacing-section-bottom);
 }
\ No newline at end of file