diff options
Diffstat (limited to 'examples/ssr/src/components')
-rw-r--r-- | examples/ssr/src/components/Container.astro | 3 | ||||
-rw-r--r-- | examples/ssr/src/components/Header.astro | 20 | ||||
-rw-r--r-- | examples/ssr/src/components/ProductListing.astro | 27 | ||||
-rw-r--r-- | examples/ssr/src/components/TextDecorationSkip.astro | 12 |
4 files changed, 33 insertions, 29 deletions
diff --git a/examples/ssr/src/components/Container.astro b/examples/ssr/src/components/Container.astro index f982522b8..3576de90a 100644 --- a/examples/ssr/src/components/Container.astro +++ b/examples/ssr/src/components/Container.astro @@ -1,7 +1,8 @@ --- -const { tag = 'div' } = Astro.props; +const { tag = "div" } = Astro.props; const Tag = tag; --- + <style> .container { width: 1248px; /** TODO: responsive */ diff --git a/examples/ssr/src/components/Header.astro b/examples/ssr/src/components/Header.astro index 426fb4be5..271f73e53 100644 --- a/examples/ssr/src/components/Header.astro +++ b/examples/ssr/src/components/Header.astro @@ -1,13 +1,14 @@ --- -import TextDecorationSkip from './TextDecorationSkip.astro'; -import Cart from './Cart.svelte'; -import { getCart } from '../api'; +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'); + @import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap"); header { margin: 1rem 2rem; @@ -17,11 +18,12 @@ const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0); h1 { margin: 0; - font-family: 'Lobster', cursive; + font-family: "Lobster", cursive; color: black; } - a, a:visited { + a, + a:visited { color: inherit; text-decoration: none; } @@ -35,14 +37,12 @@ const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0); margin-right: 1rem; } </style> -<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> +<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> + <span class="material-icons"> login</span> </a> <Cart client:idle count={cartCount} /> </div> diff --git a/examples/ssr/src/components/ProductListing.astro b/examples/ssr/src/components/ProductListing.astro index c0af5a34c..9a6ed0502 100644 --- a/examples/ssr/src/components/ProductListing.astro +++ b/examples/ssr/src/components/ProductListing.astro @@ -1,6 +1,7 @@ --- const { products } = Astro.props; --- + <style> ul { list-style-type: none; @@ -45,17 +46,17 @@ const { products } = Astro.props; </style> <slot name="title"></slot> <ul> -{products.map(product => ( - <li class="product"> - <a href={`/products/${product.id}`}> - <figure> - <img src={product.image} /> - <figcaption> - <div class="name">{product.name}</div> - <div class="price">${product.price}</div> - </figcaption> - </figure> - </a> - </li> -))} + {products.map((product) => ( + <li class="product"> + <a href={`/products/${product.id}`}> + <figure> + <img src={product.image} /> + <figcaption> + <div class="name">{product.name}</div> + <div class="price">${product.price}</div> + </figcaption> + </figure> + </a> + </li> + ))} </ul> diff --git a/examples/ssr/src/components/TextDecorationSkip.astro b/examples/ssr/src/components/TextDecorationSkip.astro index b35179ea8..191119bf4 100644 --- a/examples/ssr/src/components/TextDecorationSkip.astro +++ b/examples/ssr/src/components/TextDecorationSkip.astro @@ -1,15 +1,17 @@ --- const { text } = Astro.props; -const words = text.split(' '); +const words = text.split(" "); const last = words.length - 1; --- + <style> - span { - text-decoration: underline; - } + span { + text-decoration: underline; + } </style> {words.map((word, i) => ( <Fragment> - <span>{word}</span>{i !== last && (<Fragment> </Fragment>)} + <span>{word}</span> + {i !== last && <Fragment> </Fragment>} </Fragment> ))} |