43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
import classNames from "classnames";
|
|
|
|
import Item from "components/services/item";
|
|
|
|
const columnMap = [
|
|
"grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
|
|
"grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
|
|
"grid-cols-1 md:grid-cols-2 lg:grid-cols-2",
|
|
"grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
|
|
"grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
|
|
"grid-cols-1 md:grid-cols-2 lg:grid-cols-5",
|
|
"grid-cols-1 md:grid-cols-2 lg:grid-cols-6",
|
|
"grid-cols-1 md:grid-cols-2 lg:grid-cols-7",
|
|
"grid-cols-1 md:grid-cols-2 lg:grid-cols-8",
|
|
];
|
|
|
|
export default function List({ group, services, layout, isGroup = false }) {
|
|
//console.log({ group, services, layout });
|
|
console.log({ services });
|
|
return (
|
|
<ul
|
|
className={classNames(
|
|
layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
|
|
isGroup ? undefined : "mt-3"
|
|
)}
|
|
>
|
|
{services.map((service, i) => {
|
|
return service.type == "grouped-service" ? (
|
|
<List
|
|
key={service.name}
|
|
group={service.name}
|
|
services={service.services}
|
|
layout={{ columns: parseInt(service.name) || service.services.length, style: "row" }}
|
|
isGroup={true}
|
|
/>
|
|
) : (
|
|
<Item key={service.container ?? service.app ?? service.name} service={service} group={group} />
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
}
|