| <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> |