From 33b4d112a013e59ca7c924f11654393a031d73ba Mon Sep 17 00:00:00 2001 From: Tom Raithel Date: Tue, 21 Feb 2017 22:58:35 +0100 Subject: [PATCH] Add more components --- js/components/App.js | 12 +++------ js/components/Branding.js | 14 +++++++++++ js/components/Footer.js | 17 +++++++++++++ js/components/Header.js | 40 ++++++++++++++--------------- js/components/Item.js | 3 ++- js/components/ItemList.js | 24 ++++++++++++++++++ js/components/PageItem.js | 43 ++++++++++++++++++++++++++++++-- js/components/QuadrantSection.js | 17 +++---------- tasks/build.js | 1 - 9 files changed, 125 insertions(+), 46 deletions(-) create mode 100644 js/components/Branding.js create mode 100644 js/components/Footer.js create mode 100644 js/components/ItemList.js diff --git a/js/components/App.js b/js/components/App.js index ee37e1b..26d6537 100644 --- a/js/components/App.js +++ b/js/components/App.js @@ -3,11 +3,12 @@ import { connect } from 'react-redux'; import actions from '../actions'; import Header from './Header'; +import Footer from './Footer'; import Router from './Router'; function App(props) { return ( -
+
@@ -16,14 +17,7 @@ function App(props) {
-
- -
AOE is a leading provider of Enterprise Open Source web solutions. - Using current agile development methods, more than 250+ developers - and consultants in 8 global locations develop customized Open Source - solutions for global companies and corporations. -
-
+
diff --git a/js/components/Branding.js b/js/components/Branding.js new file mode 100644 index 0000000..25c41c1 --- /dev/null +++ b/js/components/Branding.js @@ -0,0 +1,14 @@ +import React from 'react'; + +export default function Branding({ logoContent, children }) { + return ( +
+
+ {logoContent} +
+
+ {children} +
+
+ ); +} diff --git a/js/components/Footer.js b/js/components/Footer.js new file mode 100644 index 0000000..24dc358 --- /dev/null +++ b/js/components/Footer.js @@ -0,0 +1,17 @@ +import React from 'react'; +import Branding from './Branding'; + +export default function Footer() { + return ( + } + > + + AOE is a leading provider of Enterprise Open Source web solutions. + Using current agile development methods, more than 250+ developers + and consultants in 8 global locations develop customized Open Source + solutions for global companies and corporations. + + + ); +} diff --git a/js/components/Header.js b/js/components/Header.js index 7ac7654..0626ca3 100644 --- a/js/components/Header.js +++ b/js/components/Header.js @@ -1,29 +1,29 @@ import React from 'react'; +import Branding from './Branding'; import Link from './Link'; export default function Header() { return ( -
- -
-
-
- - How to Use Technology Radar? - -
-
- - Technologies Overview - -
- + } + > +
+
+ + How to Use Technology Radar? + +
+
+ + Technologies Overview + +
+
-
+ ); } diff --git a/js/components/Item.js b/js/components/Item.js index 05b158b..262cf54 100644 --- a/js/components/Item.js +++ b/js/components/Item.js @@ -2,11 +2,12 @@ import React from 'react'; import classNames from 'classnames'; import Link from './Link'; -export default function Item({ item, noLeadingBorder = false}) { +export default function Item({ item, noLeadingBorder = false, active = false}) { return ( diff --git a/js/components/ItemList.js b/js/components/ItemList.js new file mode 100644 index 0000000..f433288 --- /dev/null +++ b/js/components/ItemList.js @@ -0,0 +1,24 @@ +import React from 'react'; +import Item from './Item'; + +export default function ItemList({ children, items, activeItem, noLeadingBorder }) { + return ( +
+
+ {children} +
+
+ { + items.map(item => ( + + )) + } +
+
+ ); +} diff --git a/js/components/PageItem.js b/js/components/PageItem.js index c038c42..cc66e73 100644 --- a/js/components/PageItem.js +++ b/js/components/PageItem.js @@ -1,12 +1,51 @@ import React from 'react'; import HeroHeadline from './HeroHeadline'; +import Badge from './Badge'; +import ItemList from './ItemList'; +import Link from './Link'; +import { groupByQuadrants } from '../../common/model'; export default function PageItems({ pageName, items }) { const [quadrantName, itemName] = pageName.split('/'); const item = items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0]; + const itemsInRing = groupByQuadrants(items)[item.quadrant][item.ring]; + return ( -
- {item.title} +
+
+
+
+

Languages & Frameworks

+
+ +
+
+ {item.ring} +
+
+ + Quadrant Overview + +
+
+ +
+
+
+
+
+
+
+

{item.title}

+
+
+ {item.ring} +
+
+
+
+
+
); } diff --git a/js/components/QuadrantSection.js b/js/components/QuadrantSection.js index 4ab50a8..62b26dc 100644 --- a/js/components/QuadrantSection.js +++ b/js/components/QuadrantSection.js @@ -1,26 +1,17 @@ import React from 'react'; import { translate, rings } from '../../common/config'; import Badge from './Badge'; -import Item from './Item'; import Link from './Link'; +import ItemList from './ItemList'; const renderList = (ringName, quadrantName, groups, big) => { const itemsInRing = groups[quadrantName][ringName]; if (big === true) { return ( -
-
- {ringName} -
-
- { - itemsInRing.map(item => ( - - )) - } -
-
+ + {ringName} + ); } diff --git a/tasks/build.js b/tasks/build.js index 6ef5180..7ee7a74 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -14,7 +14,6 @@ import { renderPage } from '../js/server'; getPageNames(radar).map((pageName) => { const pageHtml = renderPage(radar, pageName); - console.log(pageHtml); save(pageHtml, `${pageName}.html`); });