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'
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 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 Topbar from './Topbar'
import Sidebar from './Sidebar'
import Content from './Content'
import Playbar from './Playbar'

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

DZuz14

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

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

import React, { useState } from 'react'
import Collapsed from './Collapsed'
import Expanded from './Expanded'

/**
 * @function Accordion
 */
const Accordion = ({ children, initial }) => {
  const [open, setOpen] = useState(initial)

DZuz14

 {React.Children.map(children, child => {
    const id = child.props.children[0].props.id

    const collapsed = React.cloneElement(child.props.children[0], {
      handleOpen
    })

    const expanded = child.props.children[1]

    return (

DZuz14

const Accordion = ({ children }) => {
//   const [open, setOpen] = useState('')
  
//   const handleOpen = (e) => {
//     const id = e.target.getAttribute('data-id')
//     id === open ? setOpen('') : setOpen(id)
//   }
  
  return (
      <div>

DZuz14

import React from 'react'

const Collapsed = ({ children, handleOpen, id }) => (
 <div style={styles} onClick={handleOpen} data-id={id}>
   {children}
 </div>
)

const styles = {
 color: '#007bff', // blue