63 lines
1.8 KiB
Plaintext
63 lines
1.8 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
import Logo from '@components/ui/logos/Logo.astro';
|
|
|
|
interface Props {
|
|
topic: string;
|
|
area: string;
|
|
date: string;
|
|
url: string;
|
|
logoUrlLight?: string;
|
|
logoUrlDark?: string;
|
|
logoIcon?: string;
|
|
}
|
|
|
|
const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.props;
|
|
---
|
|
|
|
<div class="smooth-reveal group flex flex-col">
|
|
<a
|
|
class="card-base flex items-center"
|
|
href={url}
|
|
>
|
|
<div class="p-4 md:p-10">
|
|
<div class="flex items-center">
|
|
{logoUrlLight ? (
|
|
<div class="card-hover-icon-scale mr-5">
|
|
<Logo
|
|
srcLight={logoUrlLight}
|
|
srcDark={logoUrlDark}
|
|
alt={`Logo of ${topic}`}
|
|
/>
|
|
</div>
|
|
) : logoIcon ? (
|
|
<div class="mr-5 text-header">
|
|
<Icon name={logoIcon} class="card-hover-icon-scale h-12 w-12" />
|
|
</div>
|
|
) : null}
|
|
<div class="grow text-left">
|
|
<span class="card-text-title block text-lg">
|
|
{topic}
|
|
</span>
|
|
<span class="card-text-description block mt-1 font-medium text-xs uppercase">
|
|
{area} - {new Date(date).getFullYear()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-6 flex">
|
|
<div class="relative inline-block">
|
|
<div class="card-text-title card-hover-text-title flex relative mx-auto min-h-11 items-center font-semibold text-md sm:mx-0 sm:mt-4">
|
|
<span class="relative inline-block overflow-hidden">
|
|
Visit Page
|
|
</span>
|
|
<Icon
|
|
name="mdi:keyboard-arrow-right"
|
|
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|