Sync from a8e1c0a7402940e0fc5beef669522b315052df1blatest

1 files changed, 53 insertions, 0 deletions

diff --git a/examples/ssr/src/components/AddToCart.svelte b/examples/ssr/src/components/AddToCart.svelte
new file mode 100644
index 000000000..bae888b6b
--- /dev/null
+++ b/examples/ssr/src/components/AddToCart.svelte
@@ -0,0 +1,53 @@
+<script>
+	import { addToUserCart } from '../api';
+	let { id, name } = $props()
+
+	function notifyCartItem(id) {
+		window.dispatchEvent(new CustomEvent('add-to-cart', {
+			detail: id
+		}));
+	}
+
+	async function addToCart() {
+		await addToUserCart(id, name);
+		notifyCartItem(id);
+	}
+</script>
+<style>
+	button {
+  display:block;
+  padding:0.5em 1em 0.5em 1em;
+  border-radius:100px;
+  border:none;
+  font-size: 1.4em;
+  position:relative;
+  background:#0652DD;
+  cursor:pointer;
+  height:2em;
+  width:10em;
+  overflow:hidden;
+  transition:transform 0.1s;
+  z-index:1;
+}
+button:hover {
+  transform:scale(1.1);
+}
+
+.pretext {
+  color:#fff;
+  background:#0652DD;
+  position:absolute;
+  top:0;
+  left:0;
+  height:100%;
+  width:100%;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  font-family: 'Quicksand', sans-serif;
+	text-transform: uppercase;
+}
+</style>
+<button click={addToCart}>
+	<span class="pretext">Add to cart</span>
+</button>