src/demo-component.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import React from 'react'
import { useSunlight } from './use-sunlight'
import colormap from 'colormap'

const mainRange = colormap({
  colormap: 'autumn',
  nshades: 11,
  format: 'hex',
  alpha: 1
})

const backgroundRange = colormap({
  colormap: 'winter',
  nshades: 11,
  format: 'hex',
  alpha: 1
})

const sunlightToTheme = sunlightLevel => ({
  main: mainRange[sunlightLevel],
  background: backgroundRange[sunlightLevel]
})

const sunlightToStyle = theme => ({
  background: theme.background,
  color: theme.main,
  minHeight: '500px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
})

export const DemoComponent = ({ children }) => {
  const [sunlight] = useSunlight()
  const theme = sunlightToTheme(sunlight)
  const style = sunlightToStyle(theme)
  return <div style={style}>{children}</div>
}