52 lines
1.9 KiB
Text
52 lines
1.9 KiB
Text
|
---
|
||
|
|
import AvatarBlog from "../avatars/AvatarBlog.astro";
|
||
|
|
import {Image} from "astro:assets";
|
||
|
|
|
||
|
|
import {formatDate} from "../../../utils";
|
||
|
|
import type {CollectionEntry} from "astro:content";
|
||
|
|
|
||
|
|
const {blogEntry} = Astro.props;
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
blogEntry: CollectionEntry<"blog">;
|
||
|
|
}
|
||
|
|
---
|
||
|
|
|
||
|
|
<a class="group relative block rounded-xl outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none transition duration-500"
|
||
|
|
href={`/blog/${blogEntry.slug}/`} data-astro-prefetch>
|
||
|
|
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:size-full before:bg-gradient-to-t before:from-neutral-900/[.7] before:z-[1]">
|
||
|
|
<Image class="size-full absolute top-0 start-0 object-cover group-hover:scale-110 transition duration-500"
|
||
|
|
src={blogEntry.data.cardImage} alt={blogEntry.data.cardImageAlt} draggable={"false"} format={"avif"}/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="absolute top-0 inset-x-0 z-10">
|
||
|
|
<div class="p-4 flex flex-col h-full sm:p-6">
|
||
|
|
|
||
|
|
<div class="flex items-center">
|
||
|
|
|
||
|
|
<AvatarBlog blogEntry={blogEntry}/>
|
||
|
|
|
||
|
|
<div class="ms-2.5 sm:ms-4">
|
||
|
|
<h4 class="font-bold text-neutral-50">
|
||
|
|
{blogEntry.data.author}
|
||
|
|
</h4>
|
||
|
|
<p class="text-xs text-neutral-50/[.8]">
|
||
|
|
{formatDate(blogEntry.data.pubDate)}
|
||
|
|
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="absolute bottom-0 inset-x-0 z-10">
|
||
|
|
<div class="flex flex-col h-full p-4 sm:p-6">
|
||
|
|
<h3 class="text-lg sm:text-3xl font-bold text-neutral-50 group-hover:text-neutral-50/[.8]">
|
||
|
|
{blogEntry.data.title}
|
||
|
|
</h3>
|
||
|
|
<p class="mt-2 text-neutral-50/[.8]">
|
||
|
|
{blogEntry.data.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|