44 lines
1.1 KiB
Svelte
44 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
label: string;
|
|
plus: (label: string) => void;
|
|
minus: (label: string) => void;
|
|
showPlus?: boolean;
|
|
showMinus?: boolean;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
let { label, plus, minus, showPlus = true, showMinus = true }: Props = $props();
|
|
</script>
|
|
|
|
<div class="specialBtn flex w-min gap-2 text-2xl">
|
|
{#if showMinus}
|
|
<button class="innerBtn" onclick={() => minus(label)}>-</button>
|
|
{/if}
|
|
<div class="whitespace-nowrap">
|
|
{label}
|
|
</div>
|
|
{#if showPlus}
|
|
<button class="innerBtn" onclick={() => plus(label)}>+</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.specialBtn {
|
|
border: 1px solid black;
|
|
border-radius: 5px;
|
|
padding: 4px;
|
|
height: fit-content;
|
|
align-items: center;
|
|
}
|
|
.innerBtn {
|
|
width: 30px;
|
|
border-radius: 5px;
|
|
padding: 4px;
|
|
}
|
|
.innerBtn:hover {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
}
|
|
</style>
|