From a54e382283245c60cae509485be9d973a26bca19 Mon Sep 17 00:00:00 2001
From: Xuan <liuxuan30@gmail.com>
Date: Fri, 28 Apr 2023 17:15:06 +0800
Subject: [PATCH] fix hydration issue in #4 (#5)

Co-authored-by: Xuan <liuxuan30@noreply.github.com>
---
 app/projects/page.tsx | 74 +++++++++++++++++++++----------------------
 1 file changed, 36 insertions(+), 38 deletions(-)

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 100ee64..38d9f78 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -55,47 +55,45 @@ export default async function ProjectsPage() {
 
 				<div className="grid grid-cols-1 gap-8 mx-auto lg:grid-cols-2 ">
 					<Card>
-						<Link href={`/projects/${featured.slug}`}>
-							<article className="relative h-full w-full p-4 md:p-8">
-								<div className="flex justify-between gap-2 items-center">
-									<div className="text-xs text-zinc-100">
-										{featured.date ? (
-											<time dateTime={new Date(featured.date).toISOString()}>
-												{Intl.DateTimeFormat(undefined, {
-													dateStyle: "medium",
-												}).format(new Date(featured.date))}
-											</time>
-										) : (
-											<span>SOON</span>
-										)}
-									</div>
-									<span className="text-zinc-500 text-xs  flex items-center gap-1">
-										<Eye className="w-4 h-4" />{" "}
-										{Intl.NumberFormat("en-US", { notation: "compact" }).format(
-											views[featured.slug] ?? 0,
-										)}
-									</span>
+						<article className="relative h-full w-full p-4 md:p-8">
+							<div className="flex justify-between gap-2 items-center">
+								<div className="text-xs text-zinc-100">
+									{featured.date ? (
+										<time dateTime={new Date(featured.date).toISOString()}>
+											{Intl.DateTimeFormat(undefined, {
+												dateStyle: "medium",
+											}).format(new Date(featured.date))}
+										</time>
+									) : (
+										<span>SOON</span>
+									)}
 								</div>
+								<span className="text-zinc-500 text-xs  flex items-center gap-1">
+									<Eye className="w-4 h-4" />{" "}
+									{Intl.NumberFormat("en-US", { notation: "compact" }).format(
+										views[featured.slug] ?? 0,
+									)}
+								</span>
+							</div>
 
-								<h2
-									id="featured-post"
-									className="mt-4 text-3xl font-bold  text-zinc-100 group-hover:text-white sm:text-4xl font-display"
+							<h2
+								id="featured-post"
+								className="mt-4 text-3xl font-bold  text-zinc-100 group-hover:text-white sm:text-4xl font-display"
+							>
+								{featured.title}
+							</h2>
+							<p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
+								{featured.description}
+							</p>
+							<div className="absolute bottom-4 md:bottom-8">
+								<Link
+									className="text-zinc-200 hover:text-zinc-50 hidden lg:block"
+									href={`/projects/${featured.slug}`}
 								>
-									{featured.title}
-								</h2>
-								<p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
-									{featured.description}
-								</p>
-								<div className="absolute bottom-4 md:bottom-8">
-									<Link
-										className="text-zinc-200 hover:text-zinc-50 hidden lg:block"
-										href={`/projects/${featured.slug}`}
-									>
-										Read more <span aria-hidden="true">&rarr;</span>
-									</Link>
-								</div>
-							</article>
-						</Link>
+									Read more <span aria-hidden="true">&rarr;</span>
+								</Link>
+							</div>
+						</article>
 					</Card>
 
 					<div className="flex flex-col w-full gap-8  mx-auto border-t border-gray-900/10  lg:mx-0  lg:border-t-0 ">