62 lines
2.1 KiB
Plaintext
62 lines
2.1 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
|
|
import type { Post } from '@lib/directusTypes';
|
|
|
|
import { getDirectusImageURL } from '@lib/directusFunctions';
|
|
import Image from '@components/ui/images/Image.astro';
|
|
import { formatDate } from '@support/time';
|
|
|
|
interface Props {
|
|
post: Post;
|
|
}
|
|
|
|
const { post } = Astro.props;
|
|
|
|
const baseClasses = 'group group-hover smooth-reveal-cards rounded-xl flex flex-col';
|
|
const borderClasses = 'border border-stone-200/50 dark:border-stone-700/50';
|
|
const bgColorClasses =
|
|
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
|
|
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
|
|
---
|
|
|
|
<div class={`${baseClasses}`}>
|
|
<a
|
|
class={`rounded-xl duration-300 transition-all ${borderClasses} ${shadowClasses} ${bgColorClasses}`}
|
|
href={`/blog/${post.slug}/`}
|
|
data-astro-prefetch
|
|
>
|
|
<div
|
|
class="relative w-full flex-shrink-0 overflow-hidden rounded-t-xl before:absolute before:inset-x-0 before:z-[1] before:size-full"
|
|
>
|
|
<Image
|
|
class="h-auto w-full rounded-t-xl"
|
|
src={getDirectusImageURL(post.image)}
|
|
alt={post.image_alt}
|
|
draggable="false"
|
|
loading="eager"
|
|
format="webp"
|
|
width="800"
|
|
height="460"
|
|
/>
|
|
</div>
|
|
<div class="rounded-xl p-4 md:p-5">
|
|
<h3 class="text-xl font-bold text-neutral-600 dark:text-neutral-200">
|
|
{post.title}
|
|
</h3>
|
|
<div
|
|
class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center font-medium text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-400"
|
|
>
|
|
<span class="relative inline-block overflow-hidden"> Read more </span>
|
|
<Icon
|
|
name="mdi:keyboard-arrow-right"
|
|
class="h-3 w-3 translate-y-0.25 transition duration-300 group-hover:translate-x-1 md:h-5 md:w-5"
|
|
/>
|
|
<p class="ml-auto text-sm text-neutral-600 dark:text-neutral-400">
|
|
{formatDate(post.published_date)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|