diff options
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> +} |