61 lines
1.7 KiB
Plaintext
61 lines
1.7 KiB
Plaintext
package configview
|
|
|
|
import "github.com/tigorlazuardi/redmage/views"
|
|
import "github.com/tigorlazuardi/redmage/views/components"
|
|
|
|
templ Config(c *views.Context) {
|
|
@components.Doctype() {
|
|
@components.Head(c, components.HeadTitle("Redmage - Config"))
|
|
@components.Body(c) {
|
|
@ConfigContent(c)
|
|
}
|
|
}
|
|
}
|
|
|
|
templ ConfigContent(c *views.Context) {
|
|
<main class="prose min-w-full">
|
|
@components.Container() {
|
|
<h1>Config</h1>
|
|
<div class="divider"></div>
|
|
<h2>Theme</h2>
|
|
@SelectThemeInput()
|
|
}
|
|
</main>
|
|
}
|
|
|
|
templ SelectThemeInput() {
|
|
<div
|
|
class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4"
|
|
onchange="document.querySelector('html').dataset.theme = event.target.value; localStorage.setItem('theme', event.target.value)"
|
|
>
|
|
@themeRadio("default", "System (Default)")
|
|
@themeRadio("light", "Light")
|
|
@themeRadio("dark", "Dark")
|
|
@themeRadio("aqua", "Aqua")
|
|
@themeRadio("bumblebee", "Bumblebee")
|
|
@themeRadio("corporate", "Corporate")
|
|
@themeRadio("cupcake", "Cupcake")
|
|
@themeRadio("cyberpunk", "Cyberpunk")
|
|
@themeRadio("emerald", "Emerald")
|
|
@themeRadio("halloween", "Halloween")
|
|
@themeRadio("retro", "Retro")
|
|
@themeRadio("synthwave", "Synthwave")
|
|
@themeRadio("valentine", "Valentine")
|
|
</div>
|
|
<script>
|
|
{
|
|
const theme = localStorage.getItem('theme') || 'default';
|
|
document.querySelector(`input[name="theme-radios"][value="${theme}"]`).checked = true
|
|
}
|
|
</script>
|
|
}
|
|
|
|
templ themeRadio(value, display string) {
|
|
<div class="form-control">
|
|
<label class="label cursor-pointer gap-4 justify-start">
|
|
<input type="radio" name="theme-radios" class="radio theme-controller" value={ value }/>
|
|
<span class="label-text">{ display }</span>
|
|
</label>
|
|
</div>
|
|
}
|