-
-
Notifications
You must be signed in to change notification settings - Fork 12
Expand file tree
/
Copy pathContentCard.astro
More file actions
62 lines (55 loc) · 1.94 KB
/
Copy pathContentCard.astro
File metadata and controls
62 lines (55 loc) · 1.94 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
56
57
58
59
60
61
62
---
import Badge from "./Badge.astro";
import Avatar from "./Avatar.astro";
import { urlForImage } from "@/utils/sanity";
interface Props {
title: string;
url: string;
type: "blog" | "podcast" | "course" | "video" | "short";
thumbnail?: any;
duration?: string;
metadata?: string;
authorName?: string;
authorImage?: any;
}
const { title, url, type, thumbnail, duration, metadata, authorName, authorImage } = Astro.props;
const thumbnailUrl = thumbnail ? urlForImage(thumbnail).width(640).height(360).url() : undefined;
const authorImageUrl = authorImage ? urlForImage(authorImage).width(48).height(48).url() : undefined;
---
<a href={url} class="group block rounded-xl border border-[--border] bg-[--surface] overflow-hidden transition-all duration-200 hover:border-[--border-hover] hover:shadow-[--shadow-glow] hover:-translate-y-0.5">
{/* Thumbnail */}
{thumbnailUrl && (
<div class="relative aspect-video overflow-hidden">
<img
src={thumbnailUrl}
alt={title}
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
loading="lazy"
/>
{duration && (
<span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs font-mono px-1.5 py-0.5 rounded-sm">
{duration}
</span>
)}
</div>
)}
{/* Content */}
<div class="p-4 space-y-2">
{/* Badge + Metadata Row */}
<div class="flex items-center gap-2 text-xs">
<Badge type={type} />
{metadata && <span class="text-[--text-tertiary]">{metadata}</span>}
</div>
{/* Title */}
<h3 class="font-semibold text-[--text] line-clamp-2 group-hover:text-primary transition-colors">
{title}
</h3>
{/* Author */}
{authorName && (
<div class="flex items-center gap-2">
<Avatar src={authorImageUrl} name={authorName} size="xs" />
<span class="text-sm text-[--text-secondary]">{authorName}</span>
</div>
)}
</div>
</a>