You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.7 KiB
83 lines
2.7 KiB
package components
|
|
|
|
|
|
|
|
// ConfigSectionData represents data for a configuration section
|
|
type ConfigSectionData struct {
|
|
Title string
|
|
Icon string
|
|
Description string
|
|
Fields []interface{} // Will hold field data structures
|
|
}
|
|
|
|
// InfoSectionData represents data for an informational section
|
|
type InfoSectionData struct {
|
|
Title string
|
|
Icon string
|
|
Type string // "info", "warning", "success", "danger"
|
|
Content string
|
|
}
|
|
|
|
// ConfigSection renders a Bootstrap card for configuration settings
|
|
templ ConfigSection(data ConfigSectionData) {
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
if data.Icon != "" {
|
|
<i class={ data.Icon + " me-2" }></i>
|
|
}
|
|
{ data.Title }
|
|
</h5>
|
|
if data.Description != "" {
|
|
<small class="text-muted">{ data.Description }</small>
|
|
}
|
|
</div>
|
|
<div class="card-body">
|
|
for _, field := range data.Fields {
|
|
switch v := field.(type) {
|
|
case TextFieldData:
|
|
@TextField(v)
|
|
case NumberFieldData:
|
|
@NumberField(v)
|
|
case CheckboxFieldData:
|
|
@CheckboxField(v)
|
|
case SelectFieldData:
|
|
@SelectField(v)
|
|
case DurationFieldData:
|
|
@DurationField(v)
|
|
case DurationInputFieldData:
|
|
@DurationInputField(v)
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
// InfoSection renders a Bootstrap alert section for informational content
|
|
templ InfoSection(data InfoSectionData) {
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
if data.Icon != "" {
|
|
<i class={ data.Icon + " me-2" }></i>
|
|
}
|
|
{ data.Title }
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class={ "alert alert-" + data.Type } role="alert">
|
|
{data.Content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
|