| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- 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>
- }
-
|