diff options
author | Sebastian <sebasjm@gmail.com> | 2021-08-23 16:46:06 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-08-23 16:48:30 -0300 |
commit | 38acabfa6089ab8ac469c12b5f55022fb96935e5 (patch) | |
tree | 453dbf70000cc5e338b06201af1eaca8343f8f73 /@linaria/examples/Preact/preact-example/src/components/header/index.js | |
parent | f26125e039143b92dc0d84e7775f508ab0cdcaa8 (diff) | |
download | node-vendor-master.tar.gz node-vendor-master.tar.bz2 node-vendor-master.zip |
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; |