30 lines
660 B
Svelte
30 lines
660 B
Svelte
<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>
|