28 lines
935 B
Svelte
28 lines
935 B
Svelte
<script lang="ts">
|
|
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="p-3.5 border rounded-lg" disabled={!removable && quantity == 1} on:click={() => {
|
|
quantity--
|
|
}}>-</button>
|
|
<button class="p-3.5 border rounded-lg">{quantity}</button>
|
|
<button class="p-3.5 border rounded-lg" disabled={quantity <= maxQuantity} on:click={() => quantity++}>+</button>
|
|
</div>
|
|
</div> |