From 944784f25a5091e80f1679c7bb60c6289fd0aebd Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 14 Apr 2022 20:40:25 -0700
Subject: [PATCH] Use Button+router for label chips instead of next/link

This allows us to use preventDefault on click, which means labels
can be inside of grid cards, and clicking a label wont navigate
to the card's page.
---
 packages/web/components/elements/LabelChip.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
index 86dd3c3ba..5a7a92bc8 100644
--- a/packages/web/components/elements/LabelChip.tsx
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -1,6 +1,7 @@
-import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Button } from './Button'
 import { SpanBox } from './LayoutPrimitives'
-import { StyledText } from './StyledText'
+
 
 type LabelChipProps = {
   text: string
@@ -8,6 +9,7 @@ type LabelChipProps = {
 }
 
 export function LabelChip(props: LabelChipProps): JSX.Element {
+  const router = useRouter()
   const hexToRgb = (hex: string) => {
     const bigint = parseInt(hex.substring(1), 16)
     const r = (bigint >> 16) & 255
@@ -17,8 +19,12 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
     return [r, g, b]
   }
   const color = hexToRgb(props.color)
+
   return (
-    <Link href={`/home?q=label:"${props.text}"`}>
+    <Button style="plainIcon" onClick={(e) => {
+      router.push(`/home?q=label:"${props.text}"`)
+      e.stopPropagation()
+    }}>
       <SpanBox
         css={{
           display: 'inline-table',
@@ -37,6 +43,6 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
       >
         {props.text}
       </SpanBox>
-    </Link>
+    </Button>
   )
 }