-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathBentoCard.astro
More file actions
51 lines (46 loc) · 1.23 KB
/
Copy pathBentoCard.astro
File metadata and controls
51 lines (46 loc) · 1.23 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
---
interface Props {
title?: string;
href?: string;
class?: string;
size?: 'small' | 'medium' | 'large';
accent?: boolean;
}
const {
title,
href,
class: className = '',
size = 'small',
accent = false,
} = Astro.props;
const sizeClasses = {
small: 'col-span-1 row-span-1',
medium: 'col-span-1 row-span-2 md:col-span-2 md:row-span-1',
large: 'col-span-1 row-span-2 md:col-span-2 md:row-span-2',
};
const Tag = href ? 'a' : 'div';
---
<Tag
href={href}
class:list={[
'card group relative overflow-hidden p-5',
sizeClasses[size],
href && 'cursor-pointer hover:scale-[1.02]',
accent && 'border-[var(--accent)] bg-[var(--accent-muted)]',
className,
]}
>
{title && (
<h3 class="text-sm font-medium text-[var(--foreground-muted)] mb-3">{title}</h3>
)}
<div class="flex-1">
<slot />
</div>
{href && (
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[var(--foreground-muted)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
)}
</Tag>