You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.4 KiB
60 lines
1.4 KiB
import React from "react"; |
|
|
|
const Design2D = ({ array }) => { |
|
return ( |
|
<section |
|
className="flex items-center justify-around" |
|
style={{ height: "420px" }} |
|
> |
|
{array.map((item, index) => ( |
|
<div |
|
className={`flex flex-col justify-center h-full`} |
|
style={{ |
|
flex: item.flex, |
|
}} |
|
key={index} |
|
> |
|
{item.items.map((item1, index) => ( |
|
<div |
|
className={`flex p-2 ${item1.bg}`} |
|
style={{ flex: item1.flex }} |
|
key={index} |
|
> |
|
<div |
|
className="bg-gray-200 w-full h-full flex items-center rounded-xl justify-center" |
|
style={{ |
|
backgroundImage: `url(${item1.image})`, |
|
backgroundSize: "cover", |
|
backgroundRepeat: "no-repeat", |
|
backgroundPosition: "center", |
|
}} |
|
></div> |
|
</div> |
|
))} |
|
</div> |
|
))} |
|
</section> |
|
); |
|
}; |
|
|
|
export default Design2D; |
|
|
|
Design2D.defaultProps = { |
|
array: [ |
|
{ |
|
flex: 5, |
|
items: [{ bg: "bg-red-500", flex: 1 }], |
|
}, |
|
{ |
|
flex: 3, |
|
items: [ |
|
{ bg: "bg-blue-500", flex: 1 }, |
|
{ bg: "bg-yellow-500", flex: 1 }, |
|
], |
|
}, |
|
{ |
|
flex: 3, |
|
items: [{ bg: "bg-green-500", flex: 1 }], |
|
}, |
|
], |
|
};
|
|
|