spb/svgarden Public

1---2/**3 * ============================================================4 * SVGarden — https://www.svgarden.dev5 * Author : Simon-Pierre Boucher6 * Contact: contact@spboucher.ai7 * File   : src/components/LivePreview.astro8 * Desc   : Sandboxed iframe preview — lazy for cards, eager + bg toggle for detail9 * ============================================================10 */11import { previewDocument } from '../lib/snippets.mjs';1213interface Props {14  snippet: { slug: string; title: string; code: string };15  variant?: 'card' | 'full';16}1718const { snippet, variant = 'card' } = Astro.props;19const doc = previewDocument(snippet, { padding: variant === 'card' ? '0.75rem' : '2rem' });20---2122{23  variant === 'card' ? (24    <div class="sg-card-preview">25      <iframe26        title={`Live preview: ${snippet.title}`}27        data-sg-lazy-srcdoc={doc}28        sandbox="allow-scripts allow-same-origin"29        loading="lazy"30        tabindex="-1"31        style="pointer-events: none;"32      />33    </div>34  ) : (35    <div class="sg-panel">36      <div class="sg-panel-bar">37        <strong>Live preview</strong>38        <span class="sg-spacer" />39        <div class="sg-bg-toggle" role="group" aria-label="Preview background">40          <button type="button" data-sg-bg="#ffffff" aria-pressed="true">Light</button>41          <button type="button" data-sg-bg="#111113" aria-pressed="false">Dark</button>42        </div>43      </div>44      <div class="sg-preview-stage">45        <iframe id="sg-preview-frame" title={`Live preview: ${snippet.title}`} srcdoc={doc} sandbox="allow-scripts allow-same-origin" />46      </div>47    </div>48  )49}50