Files
TechRadarAJR/src/components/QuadrantGrid/QuadrantGrid.tsx
2021-11-11 13:43:55 +01:00

22 lines
814 B
TypeScript

import React from "react";
import { groupByQuadrants, Item, Group } from "../../model";
import { ConfigData } from "../../config";
import QuadrantSection from "../QuadrantSection/QuadrantSection";
import "./quadrant-grid.scss";
const renderQuadrant = (quadrantName: string, groups: Group, config: ConfigData) => {
return (
<div key={quadrantName} className="quadrant-grid__quadrant">
<QuadrantSection quadrantName={quadrantName} groups={groups} config={config} />
</div>
);
};
export default function QuadrantGrid({ items, config }: { items: Item[], config: ConfigData }) {
const groups = groupByQuadrants(items);
return (
<div className="quadrant-grid">
{Object.keys(config.quadrants).map((quadrantName: string) => renderQuadrant(quadrantName, groups, config))}
</div>
);
}