link search results to pages

web/src/components/search/SearchContainer.tsx

@@ -3,8 +3,9 @@ import { useDebouncedCallback } from "use-debounce";
 import { PageHeader } from "../general/PageHeader";
 import { useSearchParams, usePathname, useRouter } from "next/navigation";
 import { getSearchPath } from "@/lib/common";
-import styles from './searchContainer.module.scss';
+import styles from "./searchContainer.module.scss";
 import Icon from "../general/Icon";
+import Link from "next/link";
 
 export function SearchContainer({
   query,
@@ -34,7 +35,9 @@ export function SearchContainer({
             onQueryChange(e.target.value);
           }}
         />
-        <div className={styles.searchIcon}><Icon type="search" /></div>
+        <div className={styles.searchIcon}>
+          <Icon type="search" />
+        </div>
       </div>
       {query && <SearchResults results={results} />}
     </div>
@@ -45,6 +48,26 @@ function capitalizeFirstLetter(s: string) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
 
+function linkTo(page: any): string | null {
+  console.log(page)
+  if (page.__typename === "EventPage") {
+    return `/arrangementer/${page.slug}`;
+  }
+  if (page.__typename === "NewsPage") {
+    return `/aktuelt/${page.slug}`;
+  }
+  if (page.__typename === "AssociationPage") {
+    return `/foreninger/${page.slug}`;
+  }
+  if (page.__typename === "GenericPage") {
+    return `/{page.slug}`;
+  }
+  if (page.__typename === "VenuePage") {
+    return `/lokaler/${page.slug}`;
+  }
+  return null;
+}
+
 const PAGE_TYPES: Record<string, string> = {
   NewsPage: "Nyhet",
   EventPage: "Arrangement",
@@ -69,12 +92,21 @@ function SearchResults({ results }: { results: any }) {
         if (result.__typename === "AssociationPage") {
           resultType = capitalizeFirstLetter(result?.associationType);
         }
-        return (
-          <div key={result.id} className={styles.resultItem}>
+        const link = linkTo(result);
+        const ResultItem = () => (
+          <div className={styles.resultItem}>
             <span className={styles.suphead}>{resultType}</span>
             <h2 className={styles.title}>{result.title}</h2>
           </div>
         );
+        if (link) {
+          return (
+            <Link key={result.id} href={link}>
+              <ResultItem />
+            </Link>
+          );
+        }
+        return <ResultItem key={result.id} />;
       })}
     </div>
   );