diff options
Diffstat (limited to '@linaria/examples/Preact/preact-example/src/components/header/index.js')
-rw-r--r-- | @linaria/examples/Preact/preact-example/src/components/header/index.js | 34 |
1 files changed, 34 insertions, 0 deletions
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; |