import React, { Component } from 'react' import PropTypes from 'prop-types' import ThemeWrapper from '../components/ThemeWrapper' import getTheme from 'react-uwp/styles/getTheme' import { Button, ColorPicker, DatePicker, ProgressRing } from 'react-uwp' class Index extends Component { static async getInitialProps ({ req }) { let userAgent if (process.browser) { userAgent = navigator.userAgent } else { userAgent = req.headers['user-agent'] } return { userAgent } } static contextTypes = { theme: PropTypes.object } render () { const { userAgent } = this.props return ( <ThemeWrapper style={{ padding: '20px 0', minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' }} theme={getTheme({ userAgent })} > <Button>Test Button</Button> <DatePicker /> <ColorPicker /> <ProgressRing size={50} /> <p style={{ textAlign: 'center' }}>{userAgent.slice(12)}...</p> </ThemeWrapper> ) } } export default Index