DZuz14

import Accordion from './Accordion'
import items from './items'

<Accordion>
  {items.map(({ summary, detail }) => (
    <Accordion.Item key={summary}>
      <Accordion.Collapsed id={summary}>
       {summary}
      </Accordion.Collapsed>
      <Accordion.Expanded>{detail}</Accordion.Expanded>

DZuz14

{
  currentPlaylist: '',
  playlists: {
    home: null,
    favorites: null,
  }
};

DZuz14

/** @jsx jsx */
import React from 'react'
import { css, jsx } from '@emotion/core'
import Topbar from './Topbar'
import Sidebar from './Sidebar'
import Content from './Content'
import Playbar from './Playbar'

const MusicPlayer = () => (
  <div css={CSS}>

DZuz14

/** @jsx jsx */
import React from 'react'
import { css, jsx } from '@emotion/core'

const Content = ({ children }) => (
  <div
    className="Content"
    css={css`
      width: calc(100% - 200px);
      padding: 20px;

DZuz14

/** @jsx jsx */
import React from 'react'
import { css, jsx } from '@emotion/core'
import logo from '../../img/spotify-white.png'

const Sidebar = ({ children }) => (
  <div
    className="Sidebar"
    css={css`
      width: 200px;

DZuz14

/** @jsx jsx */
import React from 'react'
import { css, jsx } from '@emotion/core'

const Topbar = ({ children }) => (
  <div
    className="Topbar"
    css={css`
      position: absolute;
      top: 0;

DZuz14

/** @jsx jsx */
import React from 'react'
import { css, jsx } from '@emotion/core'

const Playbar = ({ children }) => (
  <div
    className="Playbar"
    css={css`
      position: absolute;
      bottom: 0;

DZuz14

[
  {
    away: {
      stat_name: "score",
      stat_value: 395,
      league_high: 509,
      team_rank: 17
    },
    home: {
      stat_name: "score",

DZuz14

const StatRow = ({ stat }) => {
  const { away, home } = stat;
  return <div></div>
}

DZuz14

{
  stat_name: "opponent score",
  stat_value: 473,
  league_high: 519,
  team_rank: 5
}