use link for board card container

Hartaithan · Apr 2, 2024 · 61b10dc · 61b10dc
1 parent 6f01b12
commit 61b10dc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/components/BoardCard/BoardCard.module.css b/components/BoardCard/BoardCard.module.css
@@ -4,13 +4,23 @@
   padding: var(--mantine-spacing-xs);
   background: var(--mantine-color-primary-6);
   border-radius: var(--mantine-radius-md);
+  flex-direction: column;
   @media (max-width: $mantine-breakpoint-md) {
     height: 250px;
     width: 200px;
     min-width: 200px;
   }
 }
 
+.container,
+.container:visited,
+.container:hover,
+.container:focus,
+.container:active {
+  color: inherit;
+  text-decoration: none;
+}
+
 .disabled {
   pointer-events: none;
   user-select: none;

diff --git a/components/BoardCard/BoardCard.tsx b/components/BoardCard/BoardCard.tsx
@@ -6,12 +6,7 @@ import {
   useSortable,
 } from "@dnd-kit/sortable";
 import { Flex, type FlexProps, Text, useMantineTheme } from "@mantine/core";
-import {
-  memo,
-  type FC,
-  type MouseEventHandler,
-  type CSSProperties,
-} from "react";
+import { memo, type FC, type CSSProperties } from "react";
 import { CSS } from "@dnd-kit/utilities";
 import { type Game } from "@/models/GameModel";
 import ProgressStats from "../ProgressStats/ProgressStats";
@@ -20,7 +15,6 @@ import PlatformBadge from "../PlatformBadge/PlatformBadge";
 import BoardCardMenu from "../BoardCardMenu/BoardCardMenu";
 import clsx from "clsx";
 import classes from "./BoardCard.module.css";
-import { useRouter } from "next/navigation";
 import { useMediaQuery } from "@mantine/hooks";
 import GameThumbnail from "../GameThumbnail/GameThumbnail";
 
@@ -53,7 +47,6 @@ const BoardCard: FC<BoardCardProps> = (props) => {
   } = props;
   const { id, title, image_url, status, platform, progress } = item;
 
-  const { push } = useRouter();
   const { spacing } = useMantineTheme();
   const {
     attributes,
@@ -65,15 +58,10 @@ const BoardCard: FC<BoardCardProps> = (props) => {
   } = useSortable({ id, animateLayoutChanges, disabled: !interactive });
   const isMobile = useMediaQuery(`(max-width: 62em)`) ?? false;
 
-  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
-    e.stopPropagation();
-    if (!interactive) return;
-    const route = `/game/${id}`;
-    push(route);
-  };
-
   return (
     <Flex
+      component={interactive ? "a" : "div"}
+      href={`/game/${id}`}
       ref={setNodeRef}
       {...attributes}
       {...listeners}
@@ -84,8 +72,6 @@ const BoardCard: FC<BoardCardProps> = (props) => {
         classes.container,
         isDragging && classes.draggable,
       ])}
-      direction="column"
-      onClick={handleClick}
       style={{
         transform: CSS.Transform.toString(transform),
         transition,

diff --git a/components/BoardCardMenu/BoardCardMenu.tsx b/components/BoardCardMenu/BoardCardMenu.tsx
@@ -22,6 +22,7 @@ const BoardCardMenu: FC<BoardCardMenuProps> = (props) => {
 
   const stopPropagation: MouseEventHandler<HTMLButtonElement> = (e) => {
     e.stopPropagation();
+    e.preventDefault();
   };
 
   const handleDelete = (): void => {