fix article cards linking

src/components/Article/Article.MobileToc.tsx

@@ -24,7 +24,7 @@ export const MobileToc = ({ toc }: Props) => {
         >
           <CustomTypography variant="label2" genericFontFamily="sans-serif">
             {toc.title}
-          </Typography>
+          </CustomTypography>
         </TocItem>
       ))}
     </Collapse>

src/components/ArticleReference/ArticleReference.tsx

@@ -14,7 +14,6 @@ export default function ArticleReference({
   data: { title, modifiedAt, mentions, slug },
   ...props
 }: Props) {
-  const router = useRouter()
   const localDate = new Date(modifiedAt).toLocaleString('en-GB', {
     day: 'numeric',
     month: 'long',
@@ -22,10 +21,12 @@ export default function ArticleReference({
   })
 
   return (
-    <ReferenceLink href={slug} {...props}>
-      <Typography component="span" variant="body1">
-        {title}
-      </Typography>
+    <Container {...props}>
+      <ArticleLink href={slug}>
+        <Typography component="span" variant="body1">
+          {title}
+        </Typography>
+      </ArticleLink>
       <Info>
         <Authors
           flexDirection={AuthorsDirection.ROW}
@@ -38,22 +39,24 @@ export default function ArticleReference({
           {localDate}
         </Typography>
       </Info>
-    </ReferenceLink>
+    </Container>
   )
 }
 
-const ReferenceLink = styled(Link)`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   padding: 8px 14px;
   border-bottom: 1px solid rgb(var(--lsd-border-primary));
   text-decoration: none;
-  cursor: pointer;
 
   &:last-child {
     border-bottom: none;
   }
+`
 
+const ArticleLink = styled(Link)`
+  text-decoration: none;
   &:hover {
     text-decoration: underline;
   }

src/components/FeaturedPost/FeaturedPost.tsx

@@ -11,26 +11,24 @@ const FeaturedPost = ({ post }: Props) => {
   return (
     <CustomGrid>
       <GridItem className="w-16">
-        <PostLink href={`/article/${post.slug}`}>
-          <PostWrapper>
-            <Post
-              data={post}
-              appearance={{
-                imageProps: {
-                  fill: true,
-                  height: '480px',
-                  nextImageProps: post.coverImage
-                    ? {
-                        quality: 100,
-                        width: post.coverImage?.width * 2,
-                        height: post.coverImage?.height * 2,
-                      }
-                    : {},
-                },
-              }}
-            />
-          </PostWrapper>
-        </PostLink>
+        <PostWrapper>
+          <Post
+            data={post}
+            appearance={{
+              imageProps: {
+                fill: true,
+                height: '480px',
+                nextImageProps: post.coverImage
+                  ? {
+                      quality: 100,
+                      width: post.coverImage?.width * 2,
+                      height: post.coverImage?.height * 2,
+                    }
+                  : {},
+              },
+            }}
+          />
+        </PostWrapper>
       </GridItem>
     </CustomGrid>
   )

src/components/PostList/PostList.tsx

@@ -56,11 +56,9 @@ export const PostsList = (props: Props) => {
               }
               key={index}
             >
-              <PostLink href={`/article/${post.slug}`}>
-                <PostWrapper className={props.loading ? 'loading' : ''}>
-                  <Post data={post} />
-                </PostWrapper>
-              </PostLink>
+              <PostWrapper className={props.loading ? 'loading' : ''}>
+                <Post data={post} />
+              </PostWrapper>
             </GridItem>
           ))
         ) : (