|
|
|
@ -4,19 +4,12 @@ import dropbox from "./images/dropbox.svg"; |
|
|
|
|
import googleDrive from "./images/google-drive.svg"; |
|
|
|
|
import blue from "./images/blue-icon.svg"; |
|
|
|
|
|
|
|
|
|
const CardHolder = ({ |
|
|
|
|
items, |
|
|
|
|
cardImage, |
|
|
|
|
cardBackgroundColor, |
|
|
|
|
cardBorder, |
|
|
|
|
cardBorderColor, |
|
|
|
|
cardBorderRadius, |
|
|
|
|
}) => { |
|
|
|
|
const CardHolder = ({ items, cardClass }) => { |
|
|
|
|
return ( |
|
|
|
|
<div className="w-full"> |
|
|
|
|
{items.map((item, index) => ( |
|
|
|
|
<div |
|
|
|
|
className={`px-2 py-1 flex flex-row items-center mt-4 ${cardBorder} ${cardBorderRadius} |
|
|
|
|
className={`flex flex-row items-center mt-4 ${cardClass} |
|
|
|
|
${item.active === true ? "bg-blue-100" : "bg-white"} |
|
|
|
|
`}
|
|
|
|
|
style={{ |
|
|
|
@ -25,13 +18,11 @@ const CardHolder = ({ |
|
|
|
|
}} |
|
|
|
|
key={index} |
|
|
|
|
> |
|
|
|
|
<img src={item.icon} className="w-14" /> |
|
|
|
|
<img src={item.icon} className="w-14" alt="" /> |
|
|
|
|
<div className="flex flex-col mr-2 flex-1"> |
|
|
|
|
<p style={{ color: "#00253A" }} className="text-sm"> |
|
|
|
|
{item.title} |
|
|
|
|
</p> |
|
|
|
|
<p className="text-sm text-[#00253A]">{item.title}</p> |
|
|
|
|
<p className="text-xs text-gray-400 font-light mr-1 mt-2"> |
|
|
|
|
{item.des}{" "} |
|
|
|
|
{item.des} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -43,11 +34,7 @@ const CardHolder = ({ |
|
|
|
|
export default CardHolder; |
|
|
|
|
|
|
|
|
|
CardHolder.defaultProps = { |
|
|
|
|
cardImage: dropbox, |
|
|
|
|
cardBackgroundColor: "#fff", |
|
|
|
|
cardBorder: "border-4", |
|
|
|
|
cardBorderColor: "#EEEEEE", |
|
|
|
|
cardBorderRadius: "rounded-lg", |
|
|
|
|
cardClass: "border-4 rounded-lg p-2", |
|
|
|
|
|
|
|
|
|
items: [ |
|
|
|
|
{ |
|
|
|
|