diff options
Diffstat (limited to 'examples/ssr/src/components/Header.astro')
| -rw-r--r-- | examples/ssr/src/components/Header.astro | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/examples/ssr/src/components/Header.astro b/examples/ssr/src/components/Header.astro index 2839c70d3..c4d925a5f 100644 --- a/examples/ssr/src/components/Header.astro +++ b/examples/ssr/src/components/Header.astro @@ -1,6 +1,10 @@ --- import TextDecorationSkip from './TextDecorationSkip.astro'; import Cart from './Cart.svelte'; +import { getCart } from '../api'; + +const cart = await getCart(); +const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0); --- <style> @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); @@ -21,11 +25,25 @@ import Cart from './Cart.svelte'; color: inherit; text-decoration: none; } + + .right-pane { + display: flex; + } + + .material-icons { + font-size: 36px; + margin-right: 1rem; + } </style> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <header> <h1><a href="/"><TextDecorationSkip text="Online Store" /></a></h1> <div class="right-pane"> - <Cart client:idle /> + <a href="/login"> + <span class="material-icons"> + login + </span> + </a> + <Cart client:idle count={cartCount} /> </div> </header> |