91 lines
1.7 KiB
Svelte
91 lines
1.7 KiB
Svelte
<script generics="T extends string" lang="ts">
|
|
import { ripple } from "#lib/actions/ripple.js";
|
|
|
|
interface Option {
|
|
label: string;
|
|
value: T;
|
|
}
|
|
|
|
interface Props {
|
|
onselect: (value: T) => void;
|
|
options: Option[];
|
|
selected: T;
|
|
}
|
|
|
|
let { options, selected, onselect }: Props = $props();
|
|
const name = $props.id();
|
|
</script>
|
|
|
|
<div class="radio-list">
|
|
{#each options as option (option.value)}
|
|
<label class="radio-row" use:ripple>
|
|
<input
|
|
checked={selected === option.value}
|
|
class="input"
|
|
{name}
|
|
onchange={() => onselect(option.value)}
|
|
type="radio"
|
|
value={option.value}
|
|
>
|
|
<span class="dot" class:on={selected === option.value}></span>
|
|
<span class="label">{option.label}</span>
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.radio-row {
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
|
|
width: 100%;
|
|
min-height: 3.25rem;
|
|
padding: 0 1.25rem;
|
|
border: 0;
|
|
|
|
font-size: 1rem;
|
|
text-align: start;
|
|
color: var(--color-text);
|
|
background-color: transparent;
|
|
transition: background-color 0.15s ease;
|
|
|
|
&:hover {
|
|
background-color: var(--color-chat-hover);
|
|
}
|
|
|
|
&:has(.input:focus-visible) {
|
|
background-color: var(--color-chat-hover);
|
|
}
|
|
}
|
|
|
|
.input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dot {
|
|
flex-shrink: 0;
|
|
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border: 2px solid var(--color-borders);
|
|
border-radius: 50%;
|
|
|
|
transition: border-color 0.15s ease;
|
|
|
|
&.on {
|
|
border-width: 0.4375rem;
|
|
border-color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.label {
|
|
flex: 1;
|
|
}
|
|
</style>
|