f644937604
Next.js 16, React 19, Monaco editor, Anthropic SDK, multi-provider AI, Wandbox Python execution, iframe HTML preview, SQLite auth + session persistence. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
interface Props {
|
|
code: string;
|
|
}
|
|
|
|
export default function HtmlPreview({ code }: Props) {
|
|
const [previewCode, setPreviewCode] = useState(code);
|
|
|
|
// Debounce the preview update to avoid iframe thrashing
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setPreviewCode(code), 500);
|
|
return () => clearTimeout(timer);
|
|
}, [code]);
|
|
|
|
return (
|
|
<div className="flex flex-col border-t border-zinc-700">
|
|
<div className="flex items-center gap-2 border-b border-zinc-700 bg-zinc-900 px-4 py-2">
|
|
<span className="text-xs font-sans font-medium uppercase tracking-wider text-zinc-400">Preview</span>
|
|
<div className="ml-auto flex gap-1">
|
|
<div className="h-2.5 w-2.5 rounded-full bg-red-500/60" />
|
|
<div className="h-2.5 w-2.5 rounded-full bg-yellow-500/60" />
|
|
<div className="h-2.5 w-2.5 rounded-full bg-green-500/60" />
|
|
</div>
|
|
</div>
|
|
<iframe
|
|
srcDoc={previewCode}
|
|
sandbox="allow-scripts"
|
|
className="h-48 w-full bg-white"
|
|
title="HTML Preview"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|