Spaces:
Running
Running
| "use client"; | |
| import { forwardRef } from "react"; | |
| import { Card, CardContent } from "@/components/ui/card"; | |
| interface PreviewPanelProps { | |
| code: string; | |
| className?: string; | |
| } | |
| const initialContent = ` | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Preview</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| font-family: system-ui, sans-serif; | |
| color: #6b7280; | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 2rem; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| max-width: 500px; | |
| } | |
| .icon { | |
| width: 60px; | |
| height: 60px; | |
| margin: 0 auto 1rem; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> | |
| </svg> | |
| </div> | |
| <h2>Preview Panel</h2> | |
| <p>Enter a prompt to generate a preview of your website</p> | |
| </div> | |
| </body> | |
| </html> | |
| `; | |
| const PreviewPanel = forwardRef<HTMLIFrameElement, PreviewPanelProps>(({ code, className = "" }, ref) => { | |
| return ( | |
| <div className="h-full p-4 bg-gray-50"> | |
| <Card className="h-full border-0 shadow-none"> | |
| <CardContent className="p-0 h-full"> | |
| <iframe | |
| ref={ref} | |
| title="preview" | |
| className={`w-full h-full border-0 rounded-lg shadow-sm ${className}`} | |
| sandbox="allow-scripts allow-same-origin" | |
| srcDoc={code || initialContent} | |
| /> | |
| </CardContent> | |
| </Card> | |
| </div> | |
| ); | |
| }); | |
| PreviewPanel.displayName = "PreviewPanel"; | |
| export default PreviewPanel; |