diff options
author | Florian Dold <florian@dold.me> | 2021-10-11 10:58:55 +0200 |
---|---|---|
committer | Florian Dold <florian@dold.me> | 2021-10-11 10:58:55 +0200 |
commit | f23a8ee4d356645ae3f91862552b256f230c6bcb (patch) | |
tree | 641bf808ef6c6bf7eb003d96f6f7ed5654f854b8 /packages/anastasis-webui/src/components | |
parent | 0bbaafcd36ce68f95faee0b91738a169848c7a90 (diff) | |
download | wallet-core-f23a8ee4d356645ae3f91862552b256f230c6bcb.tar.xz |
anastasis-webui: first commit
Diffstat (limited to 'packages/anastasis-webui/src/components')
-rw-r--r-- | packages/anastasis-webui/src/components/app.tsx | 23 | ||||
-rw-r--r-- | packages/anastasis-webui/src/components/header/index.tsx | 24 | ||||
-rw-r--r-- | packages/anastasis-webui/src/components/header/style.css | 48 |
3 files changed, 95 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/components/app.tsx b/packages/anastasis-webui/src/components/app.tsx new file mode 100644 index 000000000..5abb12a3d --- /dev/null +++ b/packages/anastasis-webui/src/components/app.tsx @@ -0,0 +1,23 @@ +import { FunctionalComponent, h } from 'preact'; +import { Route, Router } from 'preact-router'; + +import Home from '../routes/home'; +import Profile from '../routes/profile'; +import NotFoundPage from '../routes/notfound'; +import Header from './header'; + +const App: FunctionalComponent = () => { + return ( + <div id="preact_root"> + <Header /> + <Router> + <Route path="/" component={Home} /> + <Route path="/profile/" component={Profile} user="me" /> + <Route path="/profile/:user" component={Profile} /> + <NotFoundPage default /> + </Router> + </div> + ); +}; + +export default App; diff --git a/packages/anastasis-webui/src/components/header/index.tsx b/packages/anastasis-webui/src/components/header/index.tsx new file mode 100644 index 000000000..f2b6fe8ad --- /dev/null +++ b/packages/anastasis-webui/src/components/header/index.tsx @@ -0,0 +1,24 @@ +import { FunctionalComponent, h } from 'preact'; +import { Link } from 'preact-router/match'; +import style from './style.css'; + +const Header: FunctionalComponent = () => { + return ( + <header class={style.header}> + <h1>Preact App</h1> + <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/packages/anastasis-webui/src/components/header/style.css b/packages/anastasis-webui/src/components/header/style.css new file mode 100644 index 000000000..f08fda702 --- /dev/null +++ b/packages/anastasis-webui/src/components/header/style.css @@ -0,0 +1,48 @@ +.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 h1 { + float: left; + margin: 0; + padding: 0 15px; + font-size: 24px; + line-height: 56px; + font-weight: 400; + color: #FFF; +} + +.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); +} |