stashing code

apps/frontend/src/lib/components/atoms/counter.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Icon from "$lib/components/atoms/icon.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import PlusIcon from "~icons/lucide/plus";
+	import MinusIcon from "~icons/lucide/minus";
+
+	let { value = $bindable() }: { value: number } = $props();
+</script>
+
+<div class="flex items-center justify-between gap-2">
+	<Button
+		size="iconSm"
+		onclick={() => {
+			if (value <= 0) {
+				value = 0;
+				return;
+			}
+			value = value - 1;
+		}}
+	>
+		<Icon icon={MinusIcon} />
+	</Button>
+
+	<span class="p-2">{value}</span>
+
+	<Button size="iconSm" onclick={() => (value = value + 1)}>
+		<Icon icon={PlusIcon} />
+	</Button>
+</div>