-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathBlogCard.astro
More file actions
55 lines (49 loc) · 1.88 KB
/
Copy pathBlogCard.astro
File metadata and controls
55 lines (49 loc) · 1.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
---
interface Props {
url: string;
title: string;
description?: string;
image: string;
author?: string;
date?: string;
height?: string | number; // can be '300px' or 300
}
const { url, title, description, image, author, date, height = "auto" } = Astro.props;
---
<article class="group relative transition-all duration-300 hover:-translate-y-1">
<a href={url}>
<div class="overflow-hidden rounded-2xl bg-gradient-to-br from-gray-900/90 to-gray-800/90 backdrop-blur-sm">
<div class="relative">
<figure class={`overflow-hidden ${typeof height === "number" ? `h-[${height}px]` : `h-[${height}]`}`}>
<img
src={image}
alt={title}
loading="lazy"
class="h-full w-full object-cover duration-700 group-hover:scale-110"
/>
</figure>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-4 transition-transform duration-300 group-hover:translate-y-0">
<h3
class="translate-y-6 text-base font-bold leading-tight text-white transition-transform duration-300 ease-in-out group-hover:translate-y-0"
>
{title}
</h3>
{
description && (
<p class="mt-2 line-clamp-2 translate-y-6 text-sm text-white/90 transition-transform duration-300 ease-in-out group-hover:translate-y-0">
{description}
</p>
)
}
<div class="mt-2 flex items-center justify-between text-xs text-white/80">
<div class="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
{author && <p class="font-medium">By {author}</p>}
</div>
{date && <time datetime={date}>{date}</time>}
</div>
</div>
</div>
</div>
</a>
</article>