91 lines
2.1 KiB
Text
91 lines
2.1 KiB
Text
---
|
|
import Serialize from "@ayco/astro-resume";
|
|
import Icon from "astro-iconify";
|
|
import { featureFlags } 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" hidden>
|
|
<div id="toolbar">
|
|
<h2>Settings</h2>
|
|
<label for={toggle}>
|
|
<Icon name="mdi:close" />
|
|
</label>
|
|
</div>
|
|
{
|
|
enabledSettings.map(
|
|
(settings, index) =>
|
|
settings !== "" && (
|
|
<div class="field">
|
|
<input
|
|
type="checkbox"
|
|
id={`settings-${index}`}
|
|
name={`settings-${index}`}
|
|
/>
|
|
<label for={`settings-${index}`}>{settings}</label>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
<small>This is where feature flags will be set once made available. <a href="https://github.com/ayoayco/cozy/issues/new" target="_blank">Request features or report bugs here.</a></small>
|
|
</form>
|
|
|
|
<Serialize id="settings-toggle-id" data={{toggle}} />
|
|
|
|
<script>
|
|
/**
|
|
* temporary JS solution, should be replaced with CSS
|
|
*/
|
|
import { deserialize } from "@ayco/astro-resume";
|
|
const {toggle} = deserialize("settings-toggle-id");
|
|
document
|
|
.getElementById(toggle)
|
|
?.addEventListener("change", (e) => {
|
|
if (e.currentTarget?.["checked"])
|
|
document.getElementById("settings-form")?.removeAttribute("hidden");
|
|
else document.getElementById("settings-form")?.setAttribute("hidden", "");
|
|
});
|
|
</script>
|
|
|
|
|
|
<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;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
}
|
|
</style>
|