victorAnumudu
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { Icons } from "../"
|
|
|
|
type Props = {
|
|
title?: string,
|
|
descText?: string,
|
|
iconName?: string,
|
|
iconColor?: string,
|
|
cardClass?: string,
|
|
titleClass?: string,
|
|
descTextClass?: string,
|
|
onClick?: ()=>any
|
|
}
|
|
|
|
|
|
export default function DefaultCard({
|
|
title,
|
|
descText,
|
|
iconName,
|
|
iconColor,
|
|
cardClass,
|
|
titleClass,
|
|
descTextClass,
|
|
onClick
|
|
}:Props) {
|
|
return (
|
|
<button
|
|
className={`h-full w-full rounded-lg p-5 shadow-lg hover:shadow-none bg-no-repeat bg-[90%] flex justify-between gap-4 items-center transition-all duration-300 ${cardClass && cardClass}`}
|
|
onClick={onClick}
|
|
>
|
|
<div className='w-3/4'>
|
|
<h1 className={`mb-1 text-[#FFF] text-lg text-left font-bold ${titleClass && titleClass}`}>{title}</h1>
|
|
<p className={`text-sm text-left ${descTextClass && descTextClass}`}>{descText}</p>
|
|
</div>
|
|
|
|
{iconName && // DISPLAYS ICON IF THERE IS ICON NAME PRESENT
|
|
<div className='group-hover:-translate-x-2 transition-all duration-300'>
|
|
<Icons name={iconName} fillColor={`${iconColor ? iconColor : '#FFF'}`} />
|
|
</div>
|
|
}
|
|
</button>
|
|
)
|
|
}
|