From 0e67cff1c63325ca56c68a5677a0e9cdc653e092 Mon Sep 17 00:00:00 2001
From: Wout De Puysseleir <woutdp@gmail.com>
Date: Thu, 23 Feb 2023 16:42:05 -0800
Subject: [PATCH] New example

---
 examples/animated number/Numbers.svelte | 33 +++++++++++++++++++++++++
 examples/animated number/live_svelte.ex | 22 +++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 examples/animated number/Numbers.svelte
 create mode 100644 examples/animated number/live_svelte.ex

diff --git a/examples/animated number/Numbers.svelte b/examples/animated number/Numbers.svelte
new file mode 100644
index 0000000..b8b9693
--- /dev/null
+++ b/examples/animated number/Numbers.svelte	
@@ -0,0 +1,33 @@
+<script>
+    import {fly} from 'svelte/transition'
+
+    export let number = 1
+    export let pushEvent
+
+    function increase() {
+        pushEvent('set_number', { number: number + 1 })
+    }
+
+    function decrease() {
+        pushEvent('set_number', { number: number - 1 })
+    }
+</script>
+
+<h1 class="text-lg mb-6">Component is working, and the number should be animated</h1>
+
+<button on:click={increase} class="bg-black text-white px-4 py-2 rounded-lg font-bold">+</button>
+<button on:click={decrease} class="bg-black text-white px-4 py-2 rounded-lg font-bold">-</button>
+
+{#key number}
+    <p class="mt-1">
+        The number is:
+        <br/>
+        <span
+            in:fly={{y: -40}}
+            class="absolute px-2 mt-2"
+            style="font-size: {number/2}rem;"
+        >
+            {number}
+        </span>
+    </p>
+{/key}
diff --git a/examples/animated number/live_svelte.ex b/examples/animated number/live_svelte.ex
new file mode 100644
index 0000000..ea9c09c
--- /dev/null
+++ b/examples/animated number/live_svelte.ex	
@@ -0,0 +1,22 @@
+defmodule Examples.NumbersLive do
+  use ExamplesWeb, :live_view
+
+  def render(assigns) do
+    ~H"""
+    <.live_component
+      module={LiveSvelte}
+      id="Numbers"
+      name="Numbers"
+      props={%{number: @number}}
+    />
+    """
+  end
+
+  def handle_event("set_number", %{"number" => number}, socket) do
+    {:noreply, assign(socket, :number, number)}
+  end
+
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, :number, 5)}
+  end
+end