spb/svgarden Public

1---2/**3 * ============================================================4 * SVGarden — https://www.svgarden.dev5 * Author : Simon-Pierre Boucher6 * Contact: contact@spboucher.ai7 * File   : src/components/Customizer.astro8 * Desc   : Auto-generated controls from frontmatter — live preview + code rewrite9 * ============================================================10 */11interface Control {12  var: string;13  label: string;14  type: 'color' | 'range';15  default: string | number;16  min?: number;17  max?: number;18  step?: number;19  unit?: string;20}2122interface Props {23  controls: Control[];24}2526const { controls } = Astro.props;27const cssValue = (c: Control) => `${c.default}${c.unit ?? ''}`;28---2930<div class="sg-panel">31  <div class="sg-panel-bar"><strong>Customize</strong><span>updates preview, code &amp; clipboard</span></div>32  <form class="sg-customizer" data-sg-customizer>33    {34      controls.map((c, i) => (35        <div class="sg-control">36          <label for={`sg-ctl-${i}`}>{c.label}</label>37          <output for={`sg-ctl-${i}`}>{cssValue(c)}</output>38          {c.type === 'color' ? (39            <input40              type="color"41              id={`sg-ctl-${i}`}42              value={String(c.default)}43              data-var={c.var}44              data-default={String(c.default)}45              data-unit=""46            />47          ) : (48            <input49              type="range"50              id={`sg-ctl-${i}`}51              min={c.min}52              max={c.max}53              step={c.step ?? 1}54              value={String(c.default)}55              data-var={c.var}56              data-default={String(c.default)}57              data-unit={c.unit ?? ''}58            />59          )}60        </div>61      ))62    }63    <div class="sg-customizer-actions">64      <button class="sg-btn sg-btn-sm" type="reset" data-sg-reset>Reset defaults</button>65    </div>66  </form>67</div>68