diff options
Diffstat (limited to '@linaria/examples/Preact/preact-example/src/components')
3 files changed, 115 insertions, 0 deletions
diff --git a/@linaria/examples/Preact/preact-example/src/components/app.js b/@linaria/examples/Preact/preact-example/src/components/app.js new file mode 100644 index 0000000..03b0292 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/components/app.js @@ -0,0 +1,43 @@ +import { h, Component } from 'preact'; +import { Router } from 'preact-router'; + +import Header from './header'; + +import { css } from 'linaria'; +import { styled } from 'linaria/react'; + +// Code-splitting is automated for routes +import Home from '../routes/home'; +import Profile from '../routes/profile'; + +const Background = styled.div` + background-color: aliceblue; +`; + +const bluishText = css` + color: cornflowerblue; +` + +export default class App extends Component { + + /** Gets fired when the route changes. + * @param {Object} event "change" event from [preact-router](http://git.io/preact-router) + * @param {string} event.url The newly routed URL + */ + handleRoute = e => { + this.currentUrl = e.url; + }; + + render() { + return ( + <Background class={bluishText} id="app"> + <Header /> + <Router onChange={this.handleRoute}> + <Home path="/" /> + <Profile path="/profile/" user="me" /> + <Profile path="/profile/:user" /> + </Router> + </Background> + ); + } +} diff --git a/@linaria/examples/Preact/preact-example/src/components/header/index.js b/@linaria/examples/Preact/preact-example/src/components/header/index.js new file mode 100644 index 0000000..88ae55d --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/components/header/index.js @@ -0,0 +1,34 @@ +import { h } from 'preact'; +import { Link } from 'preact-router/match'; +import style from './style.css'; + +import { css } from 'linaria'; +import { styled } from 'linaria/react'; + +const header = css` + color: aliceblue; + font-weight: 800; + display: inline-block; + margin-right: 10px; +`; + +const WithLinaria = styled.h1` + color: ${props => props.color}; + display: inline-block; +` + +const Header = () => ( + <header class={style.header}> + <h1 class={header}>Preact App</h1> + <WithLinaria color="aliceblue"> + with Linaria! + </WithLinaria> + <nav> + <Link activeClassName={style.active} href="/">Home</Link> + <Link activeClassName={style.active} href="/profile">Me</Link> + <Link activeClassName={style.active} href="/profile/john">John</Link> + </nav> + </header> +); + +export default Header; diff --git a/@linaria/examples/Preact/preact-example/src/components/header/style.css b/@linaria/examples/Preact/preact-example/src/components/header/style.css new file mode 100644 index 0000000..9d3db38 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/components/header/style.css @@ -0,0 +1,38 @@ +.header { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 56px; + padding: 0; + background: #673AB7; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + z-index: 50; +} + +.header nav { + float: right; + font-size: 100%; +} + +.header nav a { + display: inline-block; + height: 56px; + line-height: 56px; + padding: 0 15px; + min-width: 50px; + text-align: center; + background: rgba(255,255,255,0); + text-decoration: none; + color: #FFF; + will-change: background-color; +} + +.header nav a:hover, +.header nav a:active { + background: rgba(0,0,0,0.2); +} + +.header nav a.active { + background: rgba(0,0,0,0.4); +} |