1---
 2import ImageWrapper from '@components/utils/ImageWrapper.astro';
 3import type { ImageMetadata } from 'astro';
 4import { Icon } from 'astro-icon/components';
 5
 6interface Props {
 7  url: string;
 8  title: string;
 9  cover: string | ImageMetadata;
10}
11
12const { url, title, cover } = Astro.props;
13---
14
15<a
16  href={url}
17  title={title}
18  class="group relative flex min-h-48 w-full overflow-hidden duration-100 active:brightness-75"
19>
20  <div
21    class="absolute inset-0 z-10 flex h-full w-full items-center justify-center bg-black/60 opacity-0 duration-300 group-hover:opacity-100"
22  >
23    <Icon name="material-symbols:chevron-right-rounded" class="h-24 w-24 text-white" />
24  </div>
25  <ImageWrapper src={cover} alt={title} class="w-full duration-1000 group-hover:scale-105" />
26</a>