SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							'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 = '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 = `<main class="min-vh-100 ${vertical ? 'p-4' : 'py-4 px-4'}${centered ? ' d-flex justify-content-center align-items-center flex-wrap' : ''}${vcentered ? ' d-flex justify-content-center flex-column' : ''}">

			${columns ? `<div class="mx-auto w-100" style="max-width: ${columns * 20}rem">` : ''}
			${separated ? (vertical ? '<div class="space-y">' : '<div class="space-x">') : ''}

			 ${example}

			${separated ? '</div>' : ''}
			${columns ? '</div>' : ''}
		 </main>`;
  }

  return `<html lang="en">
	<head>
	<title>Example</title>
	<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler.css">
	${plugins ? plugins.map((plugin) => `	<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler-${plugin}.css" />`) : ''}
</head>
	<body class="h-100${background ? ` bg-${background}` : ''}${scrollable || fullpage ? ' auto-scroll' : ' no-scroll'}"${!background && ' style="--tblr-body-bg: #fbfcfd"'}>
		 ${content}
	${vendors ? `<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler-vendors.css" />` : ''}
	<script src="${assetsUrl}/dist/js/tabler.js"></script>
	</body>
</html>`;
};

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 (
    <div className="example">
      <iframe
        className={clsx('example-frame', {
          'example-frame-resizable': resizable,
        })}
        srcDoc={srcDoc}
        style={{ height: iframeHeight }}
      />
    </div>
  );
}