'use client' import { useState, useEffect, useRef } from 'react' import { RefreshCw, ExternalLink } from 'lucide-react' interface PreviewFrameProps { code: string } // Shown when the project has no HTML/CSS/JS content yet const MOCK_UI_HTML = `

Open-View Editor

Your canvas
starts here

Write HTML, CSS & JS in the Code tab — or use AI Chat and Design to build something amazing.

14+

Presets

3D

Three.js

AI

Powered

HTML 78%

CSS 52%

JavaScript 91%

✦

AI Chat

Ask the AI to write or modify your code

›

◈

Design Library

Pick presets, tweak sliders, apply instantly

›

⬡

Three.js 3D

Particles, cubes, waves — one click away

›

👆 This is your preview

Start typing in the Code tab or apply a Design preset — your changes appear here instantly.

` // Detect if the project has any real user content function isEmptyProject(code: string): boolean { // Extract content between tags const bodyMatch = code.match(/]*>([\s\S]*?)<\/body>/i) if (!bodyMatch) return true const bodyContent = bodyMatch[1] .replace(//gi, '') // strip script tags .trim() return bodyContent.length === 0 } export function PreviewFrame({ code }: PreviewFrameProps) { const iframeRef = useRef(null) const [isLoading, setIsLoading] = useState(true) const [isFullscreen, setIsFullscreen] = useState(false) const displayCode = isEmptyProject(code) ? MOCK_UI_HTML : code useEffect(() => { if (iframeRef.current) { setIsLoading(true) const iframe = iframeRef.current const doc = iframe.contentDocument || iframe.contentWindow?.document if (doc) { doc.open() doc.write(displayCode) doc.close() iframe.onload = () => setIsLoading(false) } } }, [displayCode]) const refreshPreview = () => { if (iframeRef.current) { setIsLoading(true) const iframe = iframeRef.current const doc = iframe.contentDocument || iframe.contentWindow?.document if (doc) { doc.open() doc.write(displayCode) doc.close() setTimeout(() => setIsLoading(false), 300) } } } if (isFullscreen) { return (