Files
site-profile/src/components/cards/LargeLinkCard.astro

45 lines
1.2 KiB
Plaintext

---
import ReadMoreButton from '@components/buttons/ReadMoreButton.astro';
import Logo from '@components/images/Logo.astro';
import { getDirectusImageURL } from '@/support/url';
interface Props {
title: string;
subTitle: string;
url: string;
logoLight: string;
logoDark?: string;
}
const { title, subTitle, url, logoLight, logoDark} = Astro.props;
---
<div class="smooth-reveal w-full mx-auto">
<a
class="card-base group flex flex-row items-center justify-between w-full p-8 gap-6 md:gap-8"
href={url}
data-astro-prefetch
>
<div class="flex flex-row items-center ml-4">
<div class="card-hover-icon-scale shrink-0 mr-3">
<Logo
srcLight={getDirectusImageURL(logoLight)}
srcDark={getDirectusImageURL(logoDark!)}
alt={`Logo of ${title}`}
/>
</div>
<div class="flex flex-col gap-3 text-left ml-4">
<h2 class="card-text-header text-2xl md:text-3xl">
{title}
</h2>
<p class="card-text-title font-light text-pretty text-lg max-w-3xl">
{subTitle}
</p>
</div>
</div>
<div class="hidden md:block shrink-0 mr-4">
<ReadMoreButton/>
</div>
</a>
</div>