| 8 | } |
| 9 | |
| 10 | export function Card({ href, className, children, disabled, ...props }: CardProps) { |
| 11 | return ( |
| 12 | <div |
| 13 | className={cn( |
| 14 | "group relative rounded-lg border overflow-hidden border-zinc-200 bg-transparent p-6 text-zinc-900 shadow-md transition-shadow hover:shadow-lg dark:border-zinc-700 dark:text-zinc-50", |
| 15 | disabled && "cursor-not-allowed opacity-60", |
| 16 | className, |
| 17 | )} |
| 18 | {...props} |
| 19 | > |
| 20 | <div className="flex flex-col justify-between space-y-4"> |
| 21 | <div className="space-y-2 [&>p]:text-zinc-600 [&>p]:dark:text-zinc-300 [&>h4]:!mt-0 [&>h3]:!mt-0"> |
| 22 | {children} |
| 23 | </div> |
| 24 | </div> |
| 25 | {href && ( |
| 26 | <Link href={disabled ? "#" : href} className="absolute inset-0"> |
| 27 | <span className="sr-only">View</span> |
| 28 | </Link> |
| 29 | )} |
| 30 | </div> |
| 31 | ); |
| 32 | } |