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

Add Fadable component

Browse Source
This commit is contained in:
Tom Raithel
2017-02-25 23:34:25 +01:00
parent 5e57c9caae
commit 5f20c00bec
9 changed files with 163 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
js/components/PageItem.js
View File

@@ -3,49 +3,53 @@ import HeroHeadline from './HeroHeadline';
import Badge from './Badge';
import ItemList from './ItemList';
import Link from './Link';
import Fadeable from './Fadeable';
import { groupByQuadrants } from '../../common/model';
export default function PageItems({ pageName, items }) {
export default function PageItems({ leaving, onLeave, 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 (
<div className="item-page">
<div className="item-page__nav">
<div className="item-page__nav__inner">
<div className="item-page__header">
<h3 className="headline">Languages &amp; Frameworks</h3>
</div>
<ItemList items={itemsInRing} activeItem={item}>
<div className="split">
<div className="split__left">
<Badge big type={item.ring}>{item.ring}</Badge>
<Fadeable leaving={leaving} onLeave={onLeave}>
<div className="item-page">
<div className="item-page__nav">
<div className="item-page__nav__inner">
<div className="item-page__header">
<h3 className="headline">Languages &amp; Frameworks</h3>
</div>
<ItemList items={itemsInRing} activeItem={item}>
<div className="split">
<div className="split__left">
<Badge big type={item.ring}>{item.ring}</Badge>
</div>
<div className="split__right">
<Link className="icon-link" pageName={item.quadrant}>
<span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
</Link>
</div>
</div>
<div className="split__right">
<Link className="icon-link" pageName={item.quadrant}>
<span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
</Link>
</div>
</div>
</ItemList>
</div>
</div>
<div className="item-page__content">
<div className="item-page__content__inner">
<div className="item-page__header">
<div className="split">
<div className="split__left">
<h1 className="hero-headline hero-headline--inverse">{item.title}</h1>
</div>
<div className="split__right">
<Badge big type={item.ring}>{item.ring}</Badge>
</ItemList>
</div>
</div>
<div className="item-page__content">
<div className="item-page__content__inner">
<div className="item-page__header">
<div className="split">
<div className="split__left">
<h1 className="hero-headline hero-headline--inverse">{item.title}</h1>
</div>
<div className="split__right">
<Badge big type={item.ring}>{item.ring}</Badge>
</div>
</div>
</div>
<div className="markdown" dangerouslySetInnerHTML={{__html: item.body}} />
</div>
<div className="markdown" dangerouslySetInnerHTML={{__html: item.body}} />
</div>
</div>
</div>
</Fadeable>
);
}