AderKonstantin/aderktech-chronark.com-
1
0
Fork 0
mirror of https://github.com/AderKonstantin/aderktech-chronark.com-.git synced 2025-06-08 05:38:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve 'featured' card to be clickable, not just Read more, also resolves hydration (#7)

Browse Source 
Co-authored-by: Xuan <liuxuan30@noreply.github.com>
This commit is contained in:
Xuan 2023-05-01 18:49:14 +08:00 committed by GitHub
parent a54e382283
commit 5737d2504f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
app/projects/page.tsx
View File

@ -55,45 +55,44 @@ export default async function ProjectsPage() {
<div className="grid grid-cols-1 gap-8 mx-auto lg:grid-cols-2 ">
<Card>
<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>
)}
<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>
</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"
>
{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}`}
<h2
id="featured-post"
className="mt-4 text-3xl font-bold text-zinc-100 group-hover:text-white sm:text-4xl font-display"
>
Read more <span aria-hidden="true">&rarr;</span>
</Link>
</div>
</article>
{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">
<p className="text-zinc-200 hover:text-zinc-50 hidden lg:block">
Read more <span aria-hidden="true">&rarr;</span>
</p>
</div>
</article>
</Link>
</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 ">