- {#each MBSpecs.IO_PIN_LAYOUT as val}
- {#if includes(StaticConfiguration.supportedPins, val)}
+ {#each MBSpecs.IO_PIN_LAYOUT as currentPin}
+ {#if includes(StaticConfiguration.supportedPins, currentPin)}
- {#if largePins.includes(val)}
+ {#if largePins.includes(currentPin)}
{
- onPinSelected(val);
+ onPinSelected(currentPin);
}}
- class="bg-yellow-400 h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl hover:bg-yellow-300"
- class:bg-yellow-600={selectedPin === val}>
-
{val}
+ class="h-8 w-7 rounded-bl-xl ml-1px rounded-br-xl bg-yellow-300 cursor-pointer"
+ class:border-yellow-500={selectedPin === currentPin}
+ class:border-width-2={selectedPin === currentPin}
+ class:h-9={selectedPin === currentPin}
+ class:hover:bg-yellow-200={selectedPin !== currentPin}
+ class:bg-opacity-80={selectedPin !== currentPin}>
+
{currentPin}
{:else}
{
- onPinSelected(val);
+ onPinSelected(currentPin);
}}
- class:bg-yellow-600={selectedPin === val}
+ class:bg-yellow-600={selectedPin === currentPin}
class="bg-yellow-400 h-7 w-1 rounded-bl-xl ml-1px rounded-br-xl hover:bg-yellow-300" />
{/if}
{:else}
- {#if largePins.includes(val)}
+ {#if largePins.includes(currentPin)}
-
-
{val}
+
{:else}
+ class="bg-amber-200 opacity-40 h-7 w-1 rounded-bl-xl ml-1px rounded-br-xl" />
{/if}
{/if}
{/each}
-