|
<script lang="ts"> |
|
export let options: Record<string, string>; |
|
const keys: string[] = Object.keys(options); |
|
export let selection: string = keys[1]; |
|
</script> |
|
|
|
<div class="options"> |
|
{#each keys as key} |
|
<label data-selected={key === selection}> |
|
{options[key]} |
|
<input type="radio" bind:group={selection} value={key} /> |
|
</label> |
|
{/each} |
|
</div> |
|
|
|
<style> |
|
.options { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: center; |
|
width: 100%; |
|
margin: auto; |
|
} |
|
|
|
label { |
|
display: block; |
|
margin-bottom: 1rem; |
|
padding: 0.5rem 0.5rem; |
|
border: 2px solid hsl(0 0% 97%); |
|
border-right: none; |
|
text-align: center; |
|
transition: background-color 0.25s; |
|
cursor: pointer; |
|
} |
|
|
|
label:nth-of-type(1) { |
|
border-top-left-radius: 0.375rem; |
|
border-bottom-left-radius: 0.375rem; |
|
border-right-width: 0; |
|
} |
|
label:last-of-type { |
|
border-top-right-radius: 0.375rem; |
|
border-bottom-right-radius: 0.375rem; |
|
border-right: 2px solid hsl(0 0% 97%); |
|
} |
|
|
|
label[data-selected='true'] { |
|
background-color: hsl(0 0% 100%); |
|
color: hsl(0 0% 20%); |
|
font-weight: 700; |
|
} |
|
|
|
label:focus { |
|
outline: red; |
|
} |
|
|
|
input { |
|
position: fixed; |
|
opacity: 0; |
|
pointer-events: none; |
|
} |
|
</style> |
|
|