aboutsummaryrefslogtreecommitdiff
path: root/examples/framework-svelte/src/components/Counter.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'examples/framework-svelte/src/components/Counter.svelte')
-rw-r--r--examples/framework-svelte/src/components/Counter.svelte41
1 files changed, 41 insertions, 0 deletions
diff --git a/examples/framework-svelte/src/components/Counter.svelte b/examples/framework-svelte/src/components/Counter.svelte
new file mode 100644
index 000000000..a11538645
--- /dev/null
+++ b/examples/framework-svelte/src/components/Counter.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+ import type { Snippet } from 'svelte';
+
+ interface Props {
+ children?: Snippet
+ }
+
+ let { children }: Props = $props();
+ let count = $state(0);
+
+ function add() {
+ count += 1;
+ }
+
+ function subtract() {
+ count -= 1;
+ }
+</script>
+
+<div class="counter">
+ <button onclick={subtract}>-</button>
+ <pre>{count}</pre>
+ <button onclick={add}>+</button>
+</div>
+<div class="message">
+ {@render children?.()}
+</div>
+
+<style>
+ .counter {
+ display: grid;
+ font-size: 2em;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ margin-top: 2em;
+ place-items: center;
+ }
+
+ .message {
+ text-align: center;
+ }
+</style>