diff options
Diffstat (limited to '@linaria/examples/Preact/preact-example/src/routes')
4 files changed, 68 insertions, 0 deletions
diff --git a/@linaria/examples/Preact/preact-example/src/routes/home/index.js b/@linaria/examples/Preact/preact-example/src/routes/home/index.js new file mode 100644 index 0000000..d9a8536 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/routes/home/index.js @@ -0,0 +1,11 @@ +import { h } from 'preact'; +import style from './style'; + +const Home = () => ( + <div class={style.home}> + <h1>Home</h1> + <p>This is the Home component.</p> + </div> +); + +export default Home; diff --git a/@linaria/examples/Preact/preact-example/src/routes/home/style.css b/@linaria/examples/Preact/preact-example/src/routes/home/style.css new file mode 100644 index 0000000..f052d25 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/routes/home/style.css @@ -0,0 +1,5 @@ +.home { + padding: 56px 20px; + min-height: 100%; + width: 100%; +} diff --git a/@linaria/examples/Preact/preact-example/src/routes/profile/index.js b/@linaria/examples/Preact/preact-example/src/routes/profile/index.js new file mode 100644 index 0000000..cfc93d2 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/routes/profile/index.js @@ -0,0 +1,47 @@ +import { h, Component } from 'preact'; +import style from './style'; + +export default class Profile extends Component { + state = { + time: Date.now(), + count: 10 + }; + + // update the current time + updateTime = () => { + this.setState({ time: Date.now() }); + }; + + increment = () => { + this.setState({ count: this.state.count+1 }); + }; + + // gets called when this route is navigated to + componentDidMount() { + // start a timer for the clock: + this.timer = setInterval(this.updateTime, 1000); + } + + // gets called just before navigating away from the route + componentWillUnmount() { + clearInterval(this.timer); + } + + // Note: `user` comes from the URL, courtesy of our router + render({ user }, { time, count }) { + return ( + <div class={style.profile}> + <h1>Profile: {user}</h1> + <p>This is the user profile for a user named { user }.</p> + + <div>Current time: {new Date(time).toLocaleString()}</div> + + <p> + <button onClick={this.increment}>Click Me</button> + {' '} + Clicked {count} times. + </p> + </div> + ); + } +} diff --git a/@linaria/examples/Preact/preact-example/src/routes/profile/style.css b/@linaria/examples/Preact/preact-example/src/routes/profile/style.css new file mode 100644 index 0000000..fcb1296 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/routes/profile/style.css @@ -0,0 +1,5 @@ +.profile { + padding: 56px 20px; + min-height: 100%; + width: 100%; +} |