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

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 }],
},
],
};