mirror of
https://github.com/sern-handler/website
synced 2026-06-16 12:52:20 +00:00
85 lines
1.6 KiB
Plaintext
85 lines
1.6 KiB
Plaintext
---
|
|
import Icon from '../user-components/Icon.astro';
|
|
|
|
interface Props {
|
|
label: string;
|
|
value: string;
|
|
icon: Parameters<typeof Icon>[0]['name'];
|
|
width?: string;
|
|
options: Array<{
|
|
label: string;
|
|
value: string;
|
|
selected: boolean;
|
|
}>;
|
|
}
|
|
---
|
|
|
|
<label style={`--sl-select-width: ${Astro.props.width}`}>
|
|
<span class="sr-only">{Astro.props.label}</span>
|
|
<Icon name={Astro.props.icon} class="icon label-icon" />
|
|
<select value={Astro.props.value}>
|
|
{
|
|
Astro.props.options.map(({ value, selected, label }) => (
|
|
<option value={value} selected={selected} set:html={label} />
|
|
))
|
|
}
|
|
</select>
|
|
<Icon name="down-caret" class="icon caret" />
|
|
</label>
|
|
|
|
<style>
|
|
label {
|
|
--sl-label-icon-size: 0.875rem;
|
|
--sl-caret-size: 1.25rem;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
color: var(--sl-color-gray-1);
|
|
}
|
|
|
|
label:hover {
|
|
color: var(--sl-color-gray-2);
|
|
}
|
|
|
|
.icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.label-icon {
|
|
font-size: var(--sl-label-icon-size);
|
|
inset-inline-start: 0;
|
|
}
|
|
|
|
.caret {
|
|
font-size: var(--sl-caret-size);
|
|
inset-inline-end: 0;
|
|
}
|
|
|
|
select {
|
|
border: 0;
|
|
padding-block: 0.625rem;
|
|
padding-inline: calc(var(--sl-label-icon-size) + 0.25rem) calc(var(--sl-caret-size) + 0.25rem);
|
|
width: var(--sl-select-width);
|
|
background-color: transparent;
|
|
text-overflow: ellipsis;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
}
|
|
|
|
option {
|
|
background-color: var(--sl-color-bg-nav);
|
|
color: var(--sl-color-gray-1);
|
|
}
|
|
|
|
@media (min-width: 50rem) {
|
|
select {
|
|
font-size: var(--sl-text-sm);
|
|
}
|
|
}
|
|
</style>
|