59 lines
1.7 KiB
Plaintext
59 lines
1.7 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
|
|
import type { Post } from '@lib/directusTypes';
|
|
|
|
import Image from '@components/ui/images/Image.astro';
|
|
import { getDirectusImageURL } from '@lib/directusFunctions';
|
|
|
|
interface Props {
|
|
post: Post;
|
|
}
|
|
|
|
const { post } = Astro.props;
|
|
---
|
|
|
|
<div class="smooth-reveal-cards group flex flex-col">
|
|
<a
|
|
class="card-base border-none!"
|
|
href={`/blog/${post.slug}/`}
|
|
data-astro-prefetch
|
|
>
|
|
<div class="relative shrink-0 rounded-t-xl w-full overflow-hidden before:absolute before:inset-x-0 before:z-1 before:size-full">
|
|
<Image
|
|
class="rounded-t-xl h-auto w-full"
|
|
src={getDirectusImageURL(post.image)}
|
|
alt={post.image_alt}
|
|
draggable="false"
|
|
loading="eager"
|
|
format="webp"
|
|
/>
|
|
</div>
|
|
<div class="rounded-xl p-4 md:p-5">
|
|
<h3 class="card-text-title text-xl">
|
|
{post.title}
|
|
</h3>
|
|
<div class="ml-6 flex">
|
|
<div class="relative inline-block w-full">
|
|
<div class="card-text-title card-hover-text-title flex relative items-center mx-auto min-h-11 sm:mx-0 sm:mt-4">
|
|
<span class="relative inline-block overflow-hidden ml-2">
|
|
Read more
|
|
</span>
|
|
<Icon
|
|
name="mdi:keyboard-arrow-right"
|
|
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
|
/>
|
|
<p class="card-text-description text-sm ml-auto">
|
|
{new Date(post.published_date).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|