header

src/components/Header/Header.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import moment from 'moment';
+
+import css from './Header.scss';
+
+
+export class Header extends React.Component {
+ render() {
+ const {printDate, title, author, editor} = this.props;
+ const date = moment(printDate);
+
+ console.log(this.props, date);
+
+ return (
+ <div className={css.headerContainer}>
+ <div className={css.title}>
+ <span className={css.dayName}>
+ {date.format('dddd')}{' '}
+ </span>
+ {date.format('LL')}
+ </div>
+ <div className={css.subtitle}>
+ <span>
+ "{title}"
+ </span>
+ <span className={css.subtitleItem}>
+ By {author}
+ </span>
+ <span className={css.subtitleItem}>
+ Edited by {editor}
+ </span>
+ </div>
+ </div>
+ );
+ }
+}

src/components/Header/Header.scss

@@ -0,0 +1,27 @@
+.headerContainer {
+ padding: 25px;
+}
+
+.title {
+ font-size: 40px;
+ font-weight: 200;
+ line-height: 56px;
+}
+
+.dayName {
+ font-weight: 700;
+}
+
+.subtitle {
+ font-weight: 200;
+ font-size: 14px;
+}
+
+.subtitleItem {
+ margin-left: 8px;
+}
+
+.subtitleItem::before {
+ content: "\25AA";
+ margin-right: 8px;
+}

src/pages/Puzzle/Puzzle.jsx

@@ -5,6 +5,7 @@ import { Grid } from 'components/Grid/Grid';
 import { ClueList } from 'components/ClueList/ClueList';
 import { ActiveClue } from 'components/ActiveClue/ActiveClue';
 import { Toolbar } from 'components/Toolbar/Toolbar';
+import { Header } from 'components/Header/Header';
 
 import { across, down } from 'constants/clue';
 import {
@@ -81,15 +82,13 @@ class Puzzle extends React.Component {
  return <div>not found...</div>;
  }
 
- const { clues, activeDirection, activeCellNumber, cells } = puzzle;
+ const { clues, activeDirection, activeCellNumber, cells, puzzleMeta } = puzzle;
  const activeCell = cells[activeCellNumber];
  const activeClue = clues[activeDirection][activeCell.cellClues[activeDirection]];
 
  return (
  <div className={css.puzzleContainer}>
- <div className={css.headerContainer}>
- header
- </div>
+ <Header {...puzzleMeta} />
  <Toolbar
  clearOption={this.props.clearOption}
  revealOption={this.props.revealOption}

src/utils/puzzle.jsx

@@ -281,5 +281,6 @@ export const initializePuzzle = (puzzleObject) => {
  clues: cluesByNumber,
  activeCellNumber: 0,
  activeDirection: across,
+ puzzleMeta: puzzleObject.puzzle_meta,
  };
 };