AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add dynamic index-page

Browse Source
This commit is contained in:
Tom Raithel
2017-02-20 22:15:54 +01:00
parent c8ee3da561
commit 00b31d8414
3 changed files with 80 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
js/components/PageIndex.js
View File

@@ -1,112 +1,14 @@
import React from 'react';
import HeroHeadline from './HeroHeadline';
import QuadrantGrid from './QuadrantGrid';
export default function PageIndex() {
export default function PageIndex({ items }) {
return (
<div>
<div className="headline-group">
<HeroHeadline alt="Mar 2017">AOE Technology Radar</HeroHeadline>
</div>
<div className="quadrant-grid">
<div className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">Platforms and AOE Services</h4>
</div>
<div className="split__right"><a className="icon-link" href="/platforms-and-aoe-services.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
</div>
</div>
<div className="quadrant-section__rings">
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
<span className="ring-list__item"><a className="link" href="/platforms-and-aoe-services/bar.html">Bar</a></span>
</div>
</div>
</div>
</div>
</div>
<div className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">Methods &amp; Patterns</h4>
</div>
<div className="split__right"><a className="icon-link" href="/methods-and-patterns.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
</div>
</div>
<div className="quadrant-section__rings">
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
<span className="ring-list__item"><a className="link" href="/methods-and-patterns/foo.html">Foo</a></span>
</div>
</div>
</div>
</div>
</div>
<div className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">Tools</h4>
</div>
<div className="split__right"><a className="icon-link" href="/tools.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
</div>
</div>
<div className="quadrant-section__rings">
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
<span className="ring-list__item"><a className="link" href="/tools/grunt.html">Grunt 2</a></span>
</div>
</div>
</div>
</div>
</div>
<div className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">Languages &amp; Frameworks</h4>
</div>
<div className="split__right"><a className="icon-link" href="/languages-and-frameworks.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
</div>
</div>
<div className="quadrant-section__rings">
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react.html">React</a></span>
</div>
</div>
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react123.html">This is a long title</a></span><span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue123.html">Vue 123</a></span>
</div>
</div>
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--adopt">adopt</span></div>
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue.html">Vue</a></span>
</div>
</div>
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue1230.html">Something else</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
<QuadrantGrid items={items} />
</div>
);
}

63
js/components/QuadrantGrid.js Normal file
View File

@@ -0,0 +1,63 @@
import React from 'react';
import { groupByQuadrants } from '../../common/model';
import { translate, quadrants, rings } from '../../common/config';
const renderRing = (ringName, quadrantName, groups) => {
if (!groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0) {
return null;
}
return (
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className={`badge badge--${ringName}`}>{ringName}</span></div>
{
(groups[quadrantName][ringName]).map(item => (
<span
key={item.name}
className="ring-list__item"
>
<a className="link" href={`/${item.quadrant}/${item.name}.html`}>{item.title}</a>
</span>
))
}
</div>
</div>
);
}
const renderQuadrant = (quadrantName, groups) => {
return (
<div key={quadrantName} className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">{translate(quadrantName)}</h4>
</div>
<div className="split__right">
<a className="icon-link" href={`/${quadrantName}.html`}>
<span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
</a>
</div>
</div>
</div>
<div className="quadrant-section__rings">
{
rings.map((ringName) => renderRing(ringName, quadrantName, groups))
}
</div>
</div>
</div>
);
}
export default function({ items }) {
const groups = groupByQuadrants(items);
return (
<div className="quadrant-grid">
{
quadrants.map((quadrantName) => renderQuadrant(quadrantName, groups))
}
</div>
);
}