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

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

View File

@ -55,6 +55,7 @@ export default async function ProjectsPage() {
<div className="grid grid-cols-1 gap-8 mx-auto lg:grid-cols-2 "> <div className="grid grid-cols-1 gap-8 mx-auto lg:grid-cols-2 ">
<Card> <Card>
<Link href={`/projects/${featured.slug}`}>
<article className="relative h-full w-full p-4 md:p-8"> <article className="relative h-full w-full p-4 md:p-8">
<div className="flex justify-between gap-2 items-center"> <div className="flex justify-between gap-2 items-center">
<div className="text-xs text-zinc-100"> <div className="text-xs text-zinc-100">
@ -86,14 +87,12 @@ export default async function ProjectsPage() {
{featured.description} {featured.description}
</p> </p>
<div className="absolute bottom-4 md:bottom-8"> <div className="absolute bottom-4 md:bottom-8">
<Link <p className="text-zinc-200 hover:text-zinc-50 hidden lg:block">
className="text-zinc-200 hover:text-zinc-50 hidden lg:block"
href={`/projects/${featured.slug}`}
>
Read more <span aria-hidden="true">&rarr;</span> Read more <span aria-hidden="true">&rarr;</span>
</Link> </p>
</div> </div>
</article> </article>
</Link>
</Card> </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 "> <div className="flex flex-col w-full gap-8 mx-auto border-t border-gray-900/10 lg:mx-0 lg:border-t-0 ">