import { CopyOutlined, DownloadOutlined, FullscreenExitOutlined, FullscreenOutlined, PlayCircleOutlined, } from '@ant-design/icons'; import { Button, Modal, Tabs } from 'antd'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CodePreview } from './code-preview'; /** * The HTML preview component is used to display HTML code and provide run, download, and full-screen functionality * @param {Object} props The component props * @param {string} props.code HTML code content * @param {string} props.language Code language, default is html */ const HtmlPreview = ({ code, language = 'html' }) => { const [isModalVisible, setIsModalVisible] = useState(false); const [isCopied, setIsCopied] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false); const iframeRef = useRef(null); const { t } = useTranslation(); const [parsedCode, setParsedCode] = useState({ html: '', css: '', js: '', fullCode: '', }); // Parse the code and extract the HTML, CSS, and JS parts useEffect(() => { const parseCode = sourceCode => { let html = sourceCode; let css = ''; let js = ''; // Parse the content inside the