From 247f4177e7519b56310d8db9d8c3828a98c8b735 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Thu, 2 Nov 2023 08:40:25 +0100
Subject: [PATCH] fix: add clickable tags in collection header

---
 .../collection/summary/SummaryHeader.tsx       | 13 ++++++++++++-
 src/components/layout/HomeHeader.tsx           | 18 +++++++-----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/collection/summary/SummaryHeader.tsx b/src/components/collection/summary/SummaryHeader.tsx
index 0efb6984..c8da7a6f 100644
--- a/src/components/collection/summary/SummaryHeader.tsx
+++ b/src/components/collection/summary/SummaryHeader.tsx
@@ -1,4 +1,5 @@
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 
 import React, { useContext } from 'react';
 
@@ -19,7 +20,9 @@ import {
 import { ThumbnailSize } from '@graasp/sdk';
 import { ItemLikeRecord, ItemRecord } from '@graasp/sdk/frontend';
 
+import { UrlSearch } from '../../../config/constants';
 import { useLibraryTranslation } from '../../../config/i18n';
+import { ALL_COLLECTIONS_ROUTE } from '../../../config/routes';
 import {
   ITEM_SUMMARY_TITLE_ID,
   LIKE_COLLECTION_NOT_LOGGED_ID,
@@ -185,7 +188,15 @@ const SummaryHeader: React.FC<SummaryHeaderProps> = ({
               spacing={1}
             >
               {tags.map((text) => (
-                <Chip key={text} label={text} />
+                <Chip
+                  component={Link}
+                  href={{
+                    pathname: ALL_COLLECTIONS_ROUTE,
+                    query: { [UrlSearch.KeywordSearch]: text },
+                  }}
+                  key={text}
+                  label={text}
+                />
               ))}
             </Stack>
           )}
diff --git a/src/components/layout/HomeHeader.tsx b/src/components/layout/HomeHeader.tsx
index 16666efb..5efea475 100644
--- a/src/components/layout/HomeHeader.tsx
+++ b/src/components/layout/HomeHeader.tsx
@@ -32,17 +32,18 @@ const { GraaspLogo } = {
   ),
 };
 type PopularSearchItemProps = {
-  onClick: (search: string) => void;
   text: string;
 };
 
-const PopularSearchItem = ({
-  onClick,
-  text,
-}: PopularSearchItemProps): JSX.Element => {
+const PopularSearchItem = ({ text }: PopularSearchItemProps): JSX.Element => {
   const theme = useTheme();
   return (
     <Chip
+      component={Link}
+      href={{
+        pathname: ALL_COLLECTIONS_ROUTE,
+        query: { [UrlSearch.KeywordSearch]: text },
+      }}
       variant="filled"
       sx={{
         color: theme.palette.primary.contrastText,
@@ -52,7 +53,6 @@ const PopularSearchItem = ({
         },
       }}
       label={text}
-      onClick={() => onClick(text)}
     />
   );
 };
@@ -150,11 +150,7 @@ const HomeHeader = () => {
               useFlexGap
             >
               {popularSearches.map((term) => (
-                <PopularSearchItem
-                  key={term}
-                  text={term}
-                  onClick={handleSearch}
-                />
+                <PopularSearchItem key={term} text={term} />
               ))}
             </Stack>
           </Box>