github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/views/vsandbox/Testbed.html (about)

     1  {% import (
     2    "github.com/kyleu/dbaudit/app"
     3    "github.com/kyleu/dbaudit/app/controller/cutil"
     4    "github.com/kyleu/dbaudit/views/components"
     5    "github.com/kyleu/dbaudit/views/layout"
     6  ) %}
     7  
     8  {% code type Testbed struct { layout.Basic } %}
     9  
    10  {% func (p *Testbed) Body(as *app.State, ps *cutil.PageState) %}
    11  {%= tabs(as, ps) %}
    12  {%= accordion(as, ps) %}
    13  {%= modal(as, ps) %}
    14  {%= icons(as, ps) %}
    15  {% endfunc %}
    16  
    17  {%- func icons(as *app.State, ps *cutil.PageState) -%}
    18    <div class="card">
    19      <h3>SVG Icons</h3>
    20      {%= components.IconGallery(as, ps) %}
    21    </div>
    22  {%- endfunc -%}
    23  
    24  {%- func tabs(as *app.State, ps *cutil.PageState) -%}
    25    <div class="card">
    26      <h3>Tabs</h3>
    27      <div class="tabs">
    28        {%- for _, o := range []string{"Alpha", "Beta", "Gamma", "Delta", "Epsilon"} -%}
    29        <input name="type" type="radio" id="tab-{%s o %}" class="input"/>
    30        <label for="tab-{%s o %}" class="label">{%s o %}</label>
    31        <div class="panel"><p>This is a tab named {%s o %}</p></div>
    32        {%- endfor -%}
    33      </div>
    34    </div>
    35  {%- endfunc -%}
    36  
    37  {%- func accordion(as *app.State, ps *cutil.PageState) -%}
    38    <div class="card">
    39      <h3>Accordion</h3>
    40      <ul class="accordion">
    41        <li>
    42          <input id="accordion-a" type="checkbox" hidden="hidden" />
    43          <label for="accordion-a">{%= components.ExpandCollapse(3, ps) %} Option A</label>
    44          <div class="bd"><div><div>
    45            Option A!
    46          </div></div></div>
    47        </li>
    48        <li>
    49          <input id="accordion-c" type="checkbox" hidden="hidden" />
    50          <label for="accordion-c">{%= components.ExpandCollapse(3, ps) %} Option B (no animation)</label>
    51          <div class="bd-no-animation">
    52            Option B!
    53          </div>
    54        </li>
    55      </ul>
    56    </div>
    57  {%- endfunc -%}
    58  
    59  {%- func modal(as *app.State, ps *cutil.PageState) -%}
    60    <div class="card">
    61      <h3>Modal</h3>
    62      <div class="mt"><a href="#modal-x"><button>Open modal</button></a></div>
    63    </div>
    64    <div id="modal-x" class="modal" style="display: none;">
    65      <a class="backdrop" href="#"></a>
    66      <div class="modal-content">
    67        <div class="modal-header">
    68          <a href="#" class="modal-close">×</a>
    69          <h2>Modal</h2>
    70        </div>
    71        <div class="modal-body">
    72          Here's a modal body!
    73        </div>
    74      </div>
    75    </div>
    76  {%- endfunc -%}