Avoid nested Links in list items to prevent hydration issues

components/post-list-item.tsx

@@ -25,8 +25,7 @@ export function PostListItem({ post }: Props) {
 
   return (
     <li>
-      <article className="group rounded-lg border border-slate-200/70 bg-white/80 transition hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900/80 dark:hover:bg-slate-900">
-        <Link href={post.url} className="flex gap-4 p-4">
+      <article className="group flex gap-4 rounded-lg border border-slate-200/70 bg-white/80 p-4 transition hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900/80 dark:hover:bg-slate-900">
         {cover && (
           <div className="hidden flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:block sm:w-40">
             {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -46,7 +45,7 @@ export function PostListItem({ post }: Props) {
             </p>
           )}
           <h2 className="text-base font-semibold leading-snug text-slate-900 group-hover:text-blue-600 sm:text-lg dark:text-slate-50 dark:group-hover:text-blue-400">
-              {post.title}
+            <Link href={post.url}>{post.title}</Link>
           </h2>
           {post.tags && post.tags.length > 0 && (
             <div className="flex flex-wrap gap-2 pt-0.5">
@@ -73,7 +72,6 @@ export function PostListItem({ post }: Props) {
             </p>
           )}
         </div>
-        </Link>
       </article>
     </li>
   );