31 lines
699 B
TypeScript
31 lines
699 B
TypeScript
import clsx from 'clsx'
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode
|
|
color?: 'gradient' | 'darker' | 'yellow' | 'zinc'
|
|
className?: string | undefined
|
|
}
|
|
|
|
export function Card({ children, color = 'gradient', className }: CardProps) {
|
|
const colorVariants = {
|
|
gradient: 'bg-linear-to-tr from-[#8CD366] via-[#C7D174] to-[#FFCF82]',
|
|
darker: 'bg-green-primary text-white',
|
|
yellow: 'text-green-primary bg-yellow-tertiary',
|
|
zinc: 'text-white bg-zinc-900',
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'lg:rounded-2xl',
|
|
'lg:drop-shadow-sm',
|
|
'p-3 lg:p-12',
|
|
colorVariants[color],
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|