diff options
author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2019-03-29 00:35:56 -0700 |
---|---|---|
committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2019-03-29 00:35:56 -0700 |
commit | 65220cc8db0d7c63f49627526466d54969958fe1 (patch) | |
tree | e2989cb16576f177e60f75f9a733487adfd868f5 /src/demo-component.js | |
parent | 51687fe7a2de2d4ed2800af46f9b6a9ac6c929ee (diff) |
Init commit
Diffstat (limited to 'src/demo-component.js')
-rw-r--r-- | src/demo-component.js | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/src/demo-component.js b/src/demo-component.js new file mode 100644 index 0000000..ee83d83 --- /dev/null +++ b/src/demo-component.js @@ -0,0 +1,38 @@ +import React from 'react' +import { useSunlight } from './use-sunlight' +import colormap from 'colormap' + +const mainRange = colormap({ + colormap: 'autumn', + nshades: 10, + format: 'hex', + alpha: 1 +}) + +const backgroundRange = colormap({ + colormap: 'winter', + nshades: 10, + 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> +} |