Add text link for track tile genre and mood info (#8811)

AudiusProject · Jun 13, 2024 · edff98f · edff98f
1 parent 1169d86
commit edff98f
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/packages/web/src/components/track/GiantTrackTile.tsx b/packages/web/src/components/track/GiantTrackTile.tsx
@@ -45,6 +45,7 @@ import { Mood } from '@audius/sdk'
 import cn from 'classnames'
 import dayjs from 'dayjs'
 import { useDispatch, shallowEqual, useSelector } from 'react-redux'
+import { generatePath } from 'react-router-dom'
 
 import { TextLink, UserLink } from 'components/link'
 import Menu from 'components/menu/Menu'
@@ -58,6 +59,7 @@ import { ComponentPlacement } from 'components/types'
 import { UserGeneratedText } from 'components/user-generated-text'
 import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { moodMap } from 'utils/Moods'
+import { SEARCH_PAGE } from 'utils/route'
 import { trpc } from 'utils/trpcClientWeb'
 
 import { AiTrackSection } from './AiTrackSection'
@@ -367,7 +369,16 @@ export const GiantTrackTile = ({
       mood && (
         <InfoLabel
           labelName='mood'
-          labelValue={mood in moodMap ? moodMap[mood as Mood] : mood}
+          labelValue={
+            <TextLink
+              to={{
+                pathname: generatePath(SEARCH_PAGE, { category: 'tracks' }),
+                search: new URLSearchParams({ mood }).toString()
+              }}
+            >
+              {mood in moodMap ? moodMap[mood as Mood] : mood}
+            </TextLink>
+          }
         />
       )
     )
@@ -378,7 +389,19 @@ export const GiantTrackTile = ({
 
     return (
       shouldShow && (
-        <InfoLabel labelName='genre' labelValue={getCanonicalName(genre)} />
+        <InfoLabel
+          labelName='genre'
+          labelValue={
+            <TextLink
+              to={{
+                pathname: generatePath(SEARCH_PAGE, { category: 'tracks' }),
+                search: new URLSearchParams({ genre }).toString()
+              }}
+            >
+              {getCanonicalName(genre)}
+            </TextLink>
+          }
+        />
       )
     )
   }