80 lines
1.7 KiB
Text
80 lines
1.7 KiB
Text
---
|
|
import Icon from "astro-iconify";
|
|
import { featureFlags, featureLabels } from "../utils/feature-flags";
|
|
export interface Props {
|
|
toggle: string;
|
|
}
|
|
|
|
const enabledSettings = Object.keys(featureFlags).filter(
|
|
(key) => featureFlags[key]
|
|
);
|
|
|
|
const { toggle } = Astro.props;
|
|
---
|
|
|
|
<form id="settings-form">
|
|
<div id="toolbar">
|
|
<h2>Settings</h2>
|
|
<label for={toggle}>
|
|
<Icon name="mdi:close" />
|
|
</label>
|
|
</div>
|
|
{
|
|
enabledSettings.map(
|
|
(settings) =>
|
|
settings !== "" && (
|
|
<div class="field">
|
|
<input type="checkbox" id="settings-2" name="settings-2" />
|
|
<label for="settings-2">{featureLabels[settings]}</label>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
<small>This is where feature flags will be set once made available.</small>
|
|
</form>
|
|
|
|
<style lang="scss">
|
|
#settings-form {
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
background-color: white;
|
|
padding: 0.5em;
|
|
width: 300px;
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 0.1em;
|
|
box-shadow: 0 1px 3px 1px #eee;
|
|
|
|
#toolbar {
|
|
display: flex;
|
|
margin-bottom: 0.5em;
|
|
|
|
h2,
|
|
svg {
|
|
flex: 1;
|
|
}
|
|
|
|
svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.field {
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
/**
|
|
* temporary JS solution, should be replaced with CSS
|
|
*/
|
|
document
|
|
.getElementById("settings-toggle")
|
|
?.addEventListener("change", (e) => {
|
|
if (e.currentTarget?.["checked"])
|
|
document.getElementById("settings-form")?.removeAttribute("hidden");
|
|
else document.getElementById("settings-form")?.setAttribute("hidden", "");
|
|
});
|
|
</script>
|