36 lines
1.1 KiB
Svelte
36 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { get_current_component } from "svelte/internal";
|
|
|
|
const component = get_current_component();
|
|
|
|
export let image: string;
|
|
export let name: string;
|
|
export let description: string;
|
|
export let price: number;
|
|
export let quantity: number;
|
|
|
|
export let removable: boolean = true;
|
|
export let maxQuantity: number = Infinity;
|
|
</script>
|
|
|
|
<div class="flex flex-row justify-between items-center">
|
|
<div class="flex flex-row gap-4">
|
|
<img src={image} class="w-24" alt="">
|
|
<div class="flex flex-col">
|
|
<h4 class="font-semibold">{name}</h4>
|
|
<span class="opacity-75">{description}</span>
|
|
<span class="font-semibold text-sm">{price * quantity}€</span>
|
|
</div>
|
|
</div>
|
|
<div class="join">
|
|
<button class="btn btn-sm join-item" disabled={!removable && quantity == 1} on:click={() => {
|
|
quantity--
|
|
|
|
if ((quantity == 0) && removable) {
|
|
component.$destroy();
|
|
}
|
|
}}>-</button>
|
|
<button class="btn btn-sm join-item btn-ghost">{quantity}</button>
|
|
<button class="btn btn-sm join-item" disabled={quantity <= maxQuantity} on:click={() => quantity++}>+</button>
|
|
</div>
|
|
</div> |