Example

'use client'; import { useState } from 'react'; import clsx from 'clsx'; import { uiCdnUrl, uiUrl } from '@/config/site'; 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 = uiUrl; } let content = example; if (!fullpage) { content = `

${ columns ? `

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

' : '

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

' : ''} ${columns ? '

' : ''}

`; } example = example .replace(/a href="[^"]+"/g, 'a href="javascript:void(0)"') .replace(/action="[^"]+"/g, 'action="javascript:void(0)"'); return ` Example ${ plugins ? plugins.map( (plugin) => ` ` ) : '' } ${content} ${ vendors ? `` : '' } `; }; 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 (