import React, { useState, useEffect, useRef } from 'react';
// Main App component
export default function App() {
// Use state to hold the user's HTML code
const [htmlCode, setHtmlCode] = useState(`
<!DOCTYPE html>
<html>
<head>
<title>Your HTML Preview</title>
<link
href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/tailwind.min.css"
rel="stylesheet">
<style>
body { font-family: sans-serif; }
</style>
</head>
<body class="bg-gray-50 p-8">
<div class="max-w-md mx-auto bg-white rounded-xl shadow-lg overflow-hidden
md:max-w-2xl">
<div class="md:flex">
<div class="md:shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-48"
src="https://placehold.co/600x400/292929/ffffff?text=Image" alt="Placeholder
image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
Tailwind Card
</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black
hover:underline">
A Responsive UI Component
</a>
<p class="mt-2 text-gray-500">
This is a simple example of a responsive card component built with
Tailwind CSS. Click 'Run' to see your changes!
</p>
</div>
</div>
</div>
</body>
</html>
`.trim());
// Use a ref to get a reference to the iframe element
const iframeRef = useRef(null);
// Function to update the iframe's content with the current HTML code
const updateIframe = () => {
const iframe = iframeRef.current;
if (iframe) {
// Get the iframe's document
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Write the HTML code to the iframe's document
iframeDoc.open();
iframeDoc.write(htmlCode);
iframeDoc.close();
}
};
// Run the update function on initial component mount to show the default code
useEffect(() => {
updateIframe();
}, []); // Empty dependency array means this effect runs once on mount
return (
<div className="flex flex-col h-screen p-4 bg-gray-200 gap-4 md:flex-row">
{/* Code Editor Section */}
<div className="flex-1 bg-white rounded-xl shadow-lg flex flex-col p-4">
<h2 className="text-xl font-bold mb-2 text-gray-800">HTML Editor</h2>
<textarea
className="flex-1 w-full p-4 font-mono text-sm border border-gray-300
rounded-md resize-none focus:outline-none focus:border-blue-500 bg-gray-50"
value={htmlCode}
onChange={(e) => setHtmlCode(e.target.value)}
placeholder="Paste your HTML code here..."
/>
{/* Run button to manually trigger the preview update */}
<button
onClick={updateIframe}
className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-md font-semibold
hover:bg-blue-700 transition-colors shadow-md"
>
Run
</button>
</div>
{/* Preview Section */}
<div className="flex-1 bg-white rounded-xl shadow-lg flex flex-col p-4">
<h2 className="text-xl font-bold mb-2 text-gray-800">Live Preview</h2>
{/* The iframe is where the HTML code is rendered */}
<iframe
ref={iframeRef}
className="flex-1 w-full border border-gray-300 rounded-md"
title="HTML Preview"
/>
</div>
</div>
);
}
