refactor: ♻️ highlighting only author link on blog card

Author: slugb0t

src/components/blog/BlogFeatured.tsx

@@ -3,6 +3,7 @@ import dayjs from 'dayjs';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useState } from 'react';
 
 import authorsData from '@/assets/data/authors.json';
 
@@ -36,6 +37,8 @@ export default function BlogFeatured({
   category,
   authors,
 }: FeaturedProps) {
+  const [authorHovered, setAuthorHovered] = useState(false);
+
   const resolvedAuthors = (authors ?? []).flatMap((id) => {
     const data = authorsData[id as keyof typeof authorsData];
     return data ? [{ id, ...data }] : [];
@@ -52,26 +55,32 @@ export default function BlogFeatured({
       itemScope
       itemType="https://schema.org/BlogPosting"
     >
-      <motion.div
-        variants={mediaV}
-        transition={{ duration: 0.25 }}
-        className="relative aspect-[16/9] max-h-[420px] w-full overflow-hidden bg-slate-100 md:aspect-[5/2] md:max-h-[440px] lg:aspect-[21/9] lg:max-h-[460px]"
-      >
-        <Image
-          src={heroImage}
-          alt={imageAuthor || title}
-          fill
-          sizes="(min-width:1280px) 1100px, 100vw"
-          className="object-cover"
-          priority
-        />
-      </motion.div>
+      <Link href={`/blog/${slug}`} className="block" tabIndex={-1} aria-hidden>
+        <motion.div
+          variants={mediaV}
+          transition={{ duration: 0.25 }}
+          className="relative aspect-[16/9] max-h-[420px] w-full overflow-hidden bg-slate-100 md:aspect-[5/2] md:max-h-[440px] lg:aspect-[21/9] lg:max-h-[460px]"
+        >
+          <Image
+            src={heroImage}
+            alt={imageAuthor || title}
+            fill
+            sizes="(min-width:1280px) 1100px, 100vw"
+            className="object-cover"
+            priority
+          />
+        </motion.div>
+      </Link>
 
       <div className="p-5 sm:p-6">
         <div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-slate-600">
           {resolvedAuthors.length > 0 && (
             <>
-              <div className="relative z-10 flex items-center gap-1.5">
+              <div
+                className="relative z-10 flex items-center gap-1.5"
+                onMouseEnter={() => setAuthorHovered(true)}
+                onMouseLeave={() => setAuthorHovered(false)}
+              >
                 <Link
                   href={`/authors/${resolvedAuthors[0].id}`}
                   className="flex -space-x-1.5 transition-opacity hover:opacity-80"
@@ -129,7 +138,7 @@ export default function BlogFeatured({
         <motion.h2
           variants={titleV}
           transition={{ duration: 0.2 }}
-          className="group-hover:text-primary text-2xl leading-tight font-bold text-balance text-slate-900 group-hover:underline sm:text-3xl md:text-[1.9rem]"
+          className={`text-2xl leading-tight font-bold text-balance text-slate-900 sm:text-3xl md:text-[1.9rem] ${authorHovered ? `` : `group-hover:text-primary group-hover:underline`}`}
         >
           {title}
         </motion.h2>
@@ -141,7 +150,9 @@ export default function BlogFeatured({
         )}
 
         <div className="mt-4">
-          <div className="group-hover:text-primary text-sm font-medium underline-offset-4 hover:underline">
+          <div
+            className={`text-sm font-medium underline-offset-4 hover:underline ${authorHovered ? `` : `group-hover:text-primary`}`}
+          >
             <span>Read the full story</span>
             <Icon
               icon="solar:arrow-right-broken"

src/components/blog/BlogListItem.tsx

@@ -2,10 +2,12 @@ import dayjs from 'dayjs';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useState } from 'react';
 
-import authorsData from '@/assets/data/authors.json';
 import { slugifyTag } from '@/lib/utils';
 
+import authorsData from '@/assets/data/authors.json';
+
 type ListItemProps = {
   slug: string;
   title: string;
@@ -38,6 +40,8 @@ export default function BlogListItem({
   category,
   authors,
 }: ListItemProps) {
+  const [authorHovered, setAuthorHovered] = useState(false);
+
   const resolvedAuthors = (authors ?? []).flatMap((id) => {
     const data = authorsData[id as keyof typeof authorsData];
     return data ? [{ id, ...data }] : [];
@@ -53,9 +57,11 @@ export default function BlogListItem({
       className="group relative rounded-2xl border border-slate-200 bg-white p-3 sm:p-4"
     >
       <div className="grid grid-cols-[auto_1fr] items-start gap-4 sm:gap-5">
-        <div
-          aria-hidden
+        <Link
+          href={`/blog/${slug}`}
           className="relative col-start-1 row-span-2 aspect-[16/10] w-32 shrink-0 overflow-hidden rounded-xl bg-slate-100 sm:w-44 lg:w-52"
+          tabIndex={-1}
+          aria-hidden
         >
           <motion.div
             variants={thumbV}
@@ -70,13 +76,17 @@ export default function BlogListItem({
               className="object-cover"
             />
           </motion.div>
-        </div>
+        </Link>
 
         <div className="col-start-2 row-start-1 block">
           <div className="mb-1 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-600">
             {resolvedAuthors.length > 0 && (
               <>
-                <div className="relative z-10 flex items-center gap-1">
+                <div
+                  className="relative z-10 flex items-center gap-1"
+                  onMouseEnter={() => setAuthorHovered(true)}
+                  onMouseLeave={() => setAuthorHovered(false)}
+                >
                   <Link
                     href={`/authors/${resolvedAuthors[0].id}`}
                     className="flex -space-x-1 transition-opacity hover:opacity-80"
@@ -123,7 +133,7 @@ export default function BlogListItem({
           <motion.h3
             variants={titleV}
             transition={{ duration: 0.2 }}
-            className="group-hover:text-primary line-clamp-2 text-[1.05rem] leading-snug font-semibold text-slate-900 group-hover:underline sm:text-lg"
+            className={`line-clamp-2 text-[1.05rem] leading-snug font-semibold text-slate-900 sm:text-lg ${authorHovered ? `` : `group-hover:text-primary group-hover:underline`}`}
           >
             {title}
           </motion.h3>