87 lines
2.8 KiB
Plaintext
87 lines
2.8 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
|
|
import type { Post } from '@lib/directusTypes';
|
|
|
|
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
|
|
import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
|
|
import { getDirectusImageURL } from '@/support/url';
|
|
|
|
interface Props {
|
|
post: Post;
|
|
}
|
|
|
|
const { post } = Astro.props;
|
|
---
|
|
|
|
<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
|
|
<a
|
|
class="md:card-base-hidden group flex flex-col-reverse md:grid md:items-center md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 w-full md:px-8 md:py-8"
|
|
href={`/blog/${post.slug}`}
|
|
data-astro-prefetch
|
|
>
|
|
<div class="flex flex-col bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6 gap-4">
|
|
<h2 class="card-text-header">
|
|
{post.title}
|
|
</h2>
|
|
<p class="card-text-title font-light text-pretty sm:text-lg max-w-prose">
|
|
{post.description}
|
|
</p>
|
|
<div class="flex md:flex-col-reverse lg:flex-row items-center md:items-start lg:items-center justify-between w-full md:gap-4">
|
|
<div class="hidden md:block shrink-0 mt-4">
|
|
<ReadMoreButton/>
|
|
</div>
|
|
<div class="mt-2 lg:mt-4">
|
|
<PostMetadataSnippet
|
|
post={post}
|
|
enableCategoryLink={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{!post.image_second ? (
|
|
<div class="h-full">
|
|
<Image
|
|
class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
|
|
src={getDirectusImageURL(post.image)}
|
|
alt={post.image_alt}
|
|
draggable="false"
|
|
loading="lazy"
|
|
inferSize={true}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div class="h-full">
|
|
<div class="md:hidden">
|
|
<Image
|
|
class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
|
|
src={getDirectusImageURL(post.image)}
|
|
alt={post.image_alt}
|
|
draggable="false"
|
|
loading="lazy"
|
|
inferSize={true}
|
|
/>
|
|
</div>
|
|
<div class="hidden md:flex md:items-start">
|
|
<Image
|
|
class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
|
|
src={getDirectusImageURL(post.image)}
|
|
alt={post.image_alt}
|
|
draggable="false"
|
|
loading="lazy"
|
|
inferSize={true}
|
|
/>
|
|
<Image
|
|
class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
|
|
src={getDirectusImageURL(post.image_second)}
|
|
alt={post.image_second_alt}
|
|
draggable="false"
|
|
loading="lazy"
|
|
inferSize={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</a>
|
|
</div>
|