From 69ba111d7d4e6ad8ef6bac235b1dda332e892dbe Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 Mar 2023 10:44:26 +0800
Subject: [PATCH] Click to nav to highlights

---
 .../templates/homeFeed/HighlightsLayout.tsx   | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index 3532149fb..d892ffec7 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -1,4 +1,5 @@
 import dayjs from 'dayjs'
+import { useRouter } from 'next/router'
 import { DotsThreeVertical, HighlighterCircle } from 'phosphor-react'
 import { Fragment, useEffect, useMemo, useState } from 'react'
 import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
@@ -265,7 +266,12 @@ function HighlightItemsCard(props: HighlightItemsCardProps): JSX.Element {
         </HStack>
         <VStack css={{ height: '100%', width: '100%' }} distribution="start">
           {(props.item.node.highlights ?? []).map((highlight) => (
-            <HighlightItemCard key={highlight.id} highlight={highlight} />
+            <HighlightItemCard
+              key={highlight.id}
+              viewer={props.viewer}
+              item={props.item}
+              highlight={highlight}
+            />
           ))}
         </VStack>
       </VStack>
@@ -284,9 +290,12 @@ const StyledQuote = styled(Blockquote, {
 
 type HighlightItemCardProps = {
   highlight: Highlight
+  viewer: UserBasicData | undefined
+  item: LibraryItem
 }
 
 function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
+  const router = useRouter()
   const [hover, setHover] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
 
@@ -297,9 +306,16 @@ function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
 
   return (
     <HStack
-      css={{ width: '100%', py: '20px' }}
+      css={{ width: '100%', py: '20px', cursor: 'pointer' }}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
+      onClick={(event) => {
+        if (router && props.viewer) {
+          const dest = `/${props.viewer}/${props.item.node.slug}#${props.highlight.id}`
+          router.push(dest)
+        }
+        event.preventDefault()
+      }}
     >
       <VStack
         css={{
@@ -307,7 +323,6 @@ function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
           height: '100%',
           width: '100%',
 
-          cursor: 'pointer',
           wordBreak: 'break-word',
           overflow: 'clip',
         }}