-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
index.tsx
96 lines (91 loc) · 2.17 KB
/
index.tsx
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import cn from 'clsx'
import Link from 'next/link'
import styles from './style.module.css'
export function Card({
children,
title,
icon,
image,
arrow,
demo,
href,
...props
}) {
const animatedArrow = arrow ? (
<span
className={cn(
'transition-transform duration-75',
'group-hover:translate-x-[2px]'
)}
>
→
</span>
) : null
if (image) {
return (
<Link
href={href}
className={cn(
styles.card,
'group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 bg-gray-100 text-current no-underline shadow shadow-gray-100 transition-all duration-200',
'hover:border-gray-300 hover:shadow-lg hover:shadow-gray-100'
)}
{...props}
>
{children}
<span
className={cn(
styles.title,
'gap-2 p-4 text-gray-700',
'hover:text-gray-900'
)}
>
{icon}
<span className="flex gap-1">
{title}
{animatedArrow}
</span>
</span>
</Link>
)
}
return (
<Link
href={href}
className={cn(
styles.card,
'group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 bg-transparent text-current no-underline shadow-sm shadow-gray-100 transition-all duration-200 dark:border-neutral-800 dark:shadow-none',
'hover:border-gray-300 hover:bg-slate-50 hover:shadow-md hover:shadow-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-900 dark:hover:shadow-none'
)}
{...props}
>
<span
className={cn(
styles.title,
'gap-2 p-4 text-gray-700 dark:text-neutral-400',
'hover:text-gray-900 dark:hover:text-neutral-100'
)}
>
{icon}
{title}
{animatedArrow}
</span>
</Link>
)
}
export function Cards({ children, num, ...props }) {
return (
<div
className={cn(styles.cards, 'mt-4 gap-4')}
{...props}
style={
{
'--rows': num || 3,
...props.style
} as any
}
>
{children}
</div>
)
}