diff options
Diffstat (limited to 'examples/ssr/src/components/Header.astro')
| -rw-r--r-- | examples/ssr/src/components/Header.astro | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/examples/ssr/src/components/Header.astro b/examples/ssr/src/components/Header.astro new file mode 100644 index 000000000..d266733e9 --- /dev/null +++ b/examples/ssr/src/components/Header.astro @@ -0,0 +1,49 @@ +--- +import TextDecorationSkip from './TextDecorationSkip.astro'; +import Cart from './Cart.svelte'; +import { getCart } from '../api'; + +const cart = await getCart(Astro.request); +const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0); +--- + +<style> + @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); + + header { + margin: 1rem 2rem; + display: flex; + justify-content: space-between; + } + + h1 { + margin: 0; + font-family: 'Lobster', cursive; + color: black; + } + + a, + a:visited { + 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"> + <a href="/login"> + <span class="material-icons"> login</span> + </a> + <Cart client:idle count={cartCount} /> + </div> +</header> |