feat: make whole card clickable

frameless · Oct 20, 2023 · 8275095 · 8275095
1 parent 3f1bb5b
commit 8275095
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/apps/vth-frontend/src/components/Card/index.style.css b/apps/vth-frontend/src/components/Card/index.style.css
@@ -1,8 +1,16 @@
 .utrecht-card {
+  --utrecht-link-text-decoration: none;
+
   background-color: var(--utrecht-color-blue-90);
   max-width: 312px;
 }
 
+.utrecht-card:hover {
+  --utrecht-link-text-decoration: underline;
+
+  cursor: pointer;
+}
+
 .utrecht-card__image {
   max-width: 100%;
   object-fit: cover;

diff --git a/apps/vth-frontend/src/components/Card/index.tsx b/apps/vth-frontend/src/components/Card/index.tsx
@@ -1,7 +1,10 @@
+'use client';
+
 import { Heading2, Paragraph } from '@utrecht/component-library-react';
 import clsx from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import React, { FC, HTMLAttributes } from 'react';
 import './index.style.css';
 
@@ -18,13 +21,17 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 }
 
 export const Card: FC<CardProps> = ({ description, title, image: { url = '', alt }, link: { href }, ...props }) => {
+  const linkRef = React.useRef<HTMLAnchorElement>(null);
+
   return (
-    <div {...props} className={clsx('utrecht-card', props.className)}>
+    <div {...props} className={clsx('utrecht-card', props.className)} onClick={() => linkRef.current?.click()}>
       {url && <Image src={url} alt={alt} className={'utrecht-card__image'} width={312} height={200} />}
       <div className={'utrecht-card__content'}>
-        <Link href={href} className={'utrecht-link'}>
-          <Heading2 className="utrecht-card__title">{title}</Heading2>
-        </Link>
+        <Heading2 className="utrecht-card__title">
+          <Link ref={linkRef} href={href} className={'utrecht-link utrecht-link--html-a'}>
+            {title}
+          </Link>
+        </Heading2>
         <Paragraph className="utrecht-card__body">{description}</Paragraph>
       </div>
     </div>