Example

'use client'; import { useState } from 'react'; import clsx from 'clsx'; import { uiCdnUrl, uiUrl } from '@/config/site'; import libsSrc from '../../src/pages/_data/libs.json'; const previewHtml = ( example, { background = '', vertical = false, scrollable = false, columns = 0, centered = false, vcentered = false, separated = false, vendors = false, overview = false, fullpage = false, plugins = [], libs = [], }: { vertical?: boolean; background?: string; scrollable?: boolean; columns?: number; centered?: boolean; vcentered?: boolean; separated?: boolean; vendors?: boolean; overview?: boolean; fullpage?: boolean; plugins?: string[]; libs?: string[]; }, ) => { let assetsUrl = uiCdnUrl; if (process.env.TABLER_LOCAL) { assetsUrl = 'http://localhost:3000'; } let content = example; example = example .replace(/ href="[^"]+"/g, ' href="javascript:void(0)"') .replace(/action="[^"]+"/g, 'action="javascript:void(0)"'); if (!fullpage) { content = `

${columns ? `

` : ''} ${separated ? (vertical ? '

' : '

') : ''} ${example} ${separated ? '

' : ''} ${columns ? '

' : ''}

`; } return ` Example ${plugins ? plugins.map((plugin) => ` `) : ''} ${vendors ? `` : ''} ${libs ? libs.map((lib) => (libsSrc.css[lib] ? `` : '')) : ''} ${content} ${libs ? libs.map((lib) => (libsSrc.js[lib] ? `` : '')) : ''} `; }; export default function Example({ height = 200, vertical = false, background = '', scrollable = false, columns = 0, centered = false, vcentered = false, separated = false, vendors = false, overview = false, fullpage = false, plugins = '', resizable = false, libs = '', html, }) { const [iframeHeight, setIframeHeight] = useState(height); const srcDoc = previewHtml(html, { vertical, background, scrollable, columns, centered, vcentered, separated, vendors, overview, fullpage, plugins: plugins ? plugins.split(',') : [], libs: libs ? libs.split(',') : [], }); return ( <>