b4613e26f3
backend-lehrer (10 files): - game/database.py (785 → 5), correction_api.py (683 → 4) - classroom_engine/antizipation.py (676 → 5) - llm_gateway schools/edu_search already done in prior batch klausur-service (12 files): - orientation_crop_api.py (694 → 5), pdf_export.py (677 → 4) - zeugnis_crawler.py (676 → 5), grid_editor_api.py (671 → 5) - eh_templates.py (658 → 5), mail/api.py (651 → 5) - qdrant_service.py (638 → 5), training_api.py (625 → 4) website (6 pages): - middleware (696 → 8), mail (733 → 6), consent (628 → 8) - compliance/risks (622 → 5), export (502 → 5), brandbook (629 → 7) studio-v2 (3 components): - B2BMigrationWizard (848 → 3), CleanupPanel (765 → 2) - dashboard-experimental (739 → 2) admin-lehrer (4 files): - uebersetzungen (769 → 4), manager (670 → 2) - ChunkBrowserQA (675 → 6), dsfa/page (674 → 5) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
76 lines
3.3 KiB
TypeScript
76 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { RefObject } from 'react'
|
|
|
|
interface PreviewPanelProps {
|
|
activeTab: string
|
|
iframeRef: RefObject<HTMLIFrameElement | null>
|
|
}
|
|
|
|
export function PreviewPanel({ activeTab, iframeRef }: PreviewPanelProps) {
|
|
return (
|
|
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
|
{/* Preview Header */}
|
|
<div className="bg-slate-50 border-b border-slate-200 px-4 py-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex gap-1.5">
|
|
<div className="w-3 h-3 rounded-full bg-red-400"></div>
|
|
<div className="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
<div className="w-3 h-3 rounded-full bg-green-400"></div>
|
|
</div>
|
|
<span className="text-xs text-slate-500 ml-2">breakpilot.app</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-medium text-slate-600 bg-slate-200 px-2 py-1 rounded">
|
|
{activeTab === 'hero' && 'Hero Section'}
|
|
{activeTab === 'features' && 'Features'}
|
|
{activeTab === 'faq' && 'FAQ'}
|
|
{activeTab === 'pricing' && 'Pricing'}
|
|
{activeTab === 'other' && 'Trust & Testimonial'}
|
|
</span>
|
|
<button
|
|
onClick={() => iframeRef.current?.contentWindow?.location.reload()}
|
|
className="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded transition-colors"
|
|
title="Preview neu laden"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* Preview Frame */}
|
|
<div className="relative h-[calc(100vh-340px)] bg-slate-100">
|
|
<iframe
|
|
ref={iframeRef}
|
|
src={`https://macmini:3000/?preview=true§ion=${activeTab}#${activeTab}`}
|
|
className="w-full h-full border-0 scale-75 origin-top-left"
|
|
style={{
|
|
width: '133.33%',
|
|
height: '133.33%',
|
|
transform: 'scale(0.75)',
|
|
transformOrigin: 'top left',
|
|
}}
|
|
title="Website Preview"
|
|
sandbox="allow-same-origin allow-scripts"
|
|
/>
|
|
{/* Section Indicator */}
|
|
<div className="absolute bottom-4 left-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 text-sm">
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>
|
|
Du bearbeitest: <strong>
|
|
{activeTab === 'hero' && 'Hero Section (Startbereich)'}
|
|
{activeTab === 'features' && 'Features (Funktionen)'}
|
|
{activeTab === 'faq' && 'FAQ (Haeufige Fragen)'}
|
|
{activeTab === 'pricing' && 'Pricing (Preise)'}
|
|
{activeTab === 'other' && 'Trust & Testimonial'}
|
|
</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|