config_sections.templ 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. package components
  2. // ConfigSectionData represents data for a configuration section
  3. type ConfigSectionData struct {
  4. Title string
  5. Icon string
  6. Description string
  7. Fields []interface{} // Will hold field data structures
  8. }
  9. // InfoSectionData represents data for an informational section
  10. type InfoSectionData struct {
  11. Title string
  12. Icon string
  13. Type string // "info", "warning", "success", "danger"
  14. Content string
  15. }
  16. // ConfigSection renders a Bootstrap card for configuration settings
  17. templ ConfigSection(data ConfigSectionData) {
  18. <div class="row">
  19. <div class="col-12">
  20. <div class="card mb-4">
  21. <div class="card-header">
  22. <h5 class="mb-0">
  23. if data.Icon != "" {
  24. <i class={ data.Icon + " me-2" }></i>
  25. }
  26. { data.Title }
  27. </h5>
  28. if data.Description != "" {
  29. <small class="text-muted">{ data.Description }</small>
  30. }
  31. </div>
  32. <div class="card-body">
  33. for _, field := range data.Fields {
  34. switch v := field.(type) {
  35. case TextFieldData:
  36. @TextField(v)
  37. case NumberFieldData:
  38. @NumberField(v)
  39. case CheckboxFieldData:
  40. @CheckboxField(v)
  41. case SelectFieldData:
  42. @SelectField(v)
  43. case DurationFieldData:
  44. @DurationField(v)
  45. case DurationInputFieldData:
  46. @DurationInputField(v)
  47. }
  48. }
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. }
  54. // InfoSection renders a Bootstrap alert section for informational content
  55. templ InfoSection(data InfoSectionData) {
  56. <div class="row">
  57. <div class="col-12">
  58. <div class="card mb-3">
  59. <div class="card-header">
  60. <h5 class="mb-0">
  61. if data.Icon != "" {
  62. <i class={ data.Icon + " me-2" }></i>
  63. }
  64. { data.Title }
  65. </h5>
  66. </div>
  67. <div class="card-body">
  68. <div class={ "alert alert-" + data.Type } role="alert">
  69. {data.Content}
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. }