File size: 1,160 Bytes
00d1c08 ce29375 00d1c08 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<script lang="ts">
interface Props {
size?: number;
isHighlighted?: boolean;
onClick?: () => void;
}
let { size = 100, isHighlighted = false, onClick }: Props = $props();
</script>
<button
class="empty-slot"
class:highlighted={isHighlighted}
style="width: {size}px; height: {size + 30}px;"
onclick={onClick}
type="button"
>
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
{#if isHighlighted}
<circle cx="12" cy="12" r="10" />
<path d="M12 8v8m-4-4h8" />
{:else}
<path d="M12 5v14m-7-7h14" />
{/if}
</svg>
</button>
<style>
.empty-slot {
background: #f5f5f5;
border: 2px dashed #d1d1d6;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #8e8e93;
transition: all 0.2s;
}
.empty-slot:hover {
background: #e5e5ea;
}
.empty-slot:active {
transform: scale(0.95);
}
.empty-slot.highlighted {
background: rgba(0, 123, 255, 0.1);
border-color: #007bff;
color: #007bff;
}
</style> |