SinachPat
69287ebec0
Mirror to GitHub / mirror (push) Canceled after 0s
- web: two-pane app chrome (chat panel + browser-framed preview) - ChatPanel, Preview, ApproveBar components + useChat (mock agent for now) - Fluent/Figma design system (Inter, dark chrome, elevation, motion) - 107 unit tests + Playwright e2e green; web typechecks + builds
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import type { ChatStatus } from '../hooks/useChat.ts';
|
|
|
|
type PreviewProps = {
|
|
heading: string;
|
|
status: ChatStatus;
|
|
applied: boolean;
|
|
};
|
|
|
|
export function Preview({ heading, status, applied }: PreviewProps) {
|
|
return (
|
|
<main className="preview">
|
|
<div className="browser">
|
|
<div className="browser-bar">
|
|
<span className="dot dot-red" />
|
|
<span className="dot dot-yellow" />
|
|
<span className="dot dot-green" />
|
|
<span className="browser-url">preview.wursor.dev</span>
|
|
{applied && <span className="preview-badge">Applied to your site ✓</span>}
|
|
</div>
|
|
<div className="browser-body">
|
|
{status === 'working' ? (
|
|
<div className="preview-working">Applying your change…</div>
|
|
) : (
|
|
<div className="mock-site">
|
|
<nav className="mock-nav">
|
|
<span className="mock-brand">Your Site</span>
|
|
<span>About</span>
|
|
<span>Contact</span>
|
|
</nav>
|
|
<div className="mock-hero">
|
|
<h1 className="wursor-preview-frame">{heading}</h1>
|
|
<p>This is a live preview of your sandbox — the real site stays untouched until you approve.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|