devscard/src/sections/favorites/media-tile.astro

34 lines
745 B
Text

---
import { Image } from '@astrojs/image/components';
import Typography from '@/components/typography.astro';
import type { Media } from '@/types/favorites-section';
export interface Props {
value: Media;
}
const {
value: { image, title, type, url },
} = Astro.props;
---
<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
<Image
class="rounded-lg shadow-md aspect-square object-cover"
fit="cover"
format="webp"
aspectRatio={1}
quality={100}
src={image}
alt={title}
/>
<div class="gap-1">
<Typography variant="tile-title">
{title}
</Typography>
<Typography variant="tile-subtitle">
{type}
</Typography>
</div>
</a>