import { mergeProps, Show } from 'solid-js';
import { GeneralObserver } from '../general-observer';
export const Figma = (propes) => {
    const props_ = mergeProps({
        height: 450,
    }, propes);
    const regex = /(file|proto)\/([\dA-Za-z]{22,128})(?:\/.*)?$/;
    return (<Show when={regex.test(props_.url)}>
      <GeneralObserver height={props_.height}>
        <iframe title={`figma-${props_.title}`} class="figma" height={props_.height} style={{
            width: '100%',
        }} src={`//www.figma.com/embed?embed_host=mdx-embed&url=https://www.figma.com/${props_.url}`} allowfullscreen/>
      </GeneralObserver>
    </Show>);
};