Spaces:
Build error
Build error
File size: 2,778 Bytes
75fefa7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
import { useEffect, useState } from "react";
import LivePreviewFrame from "./live-preview-frame";
export default function WebBrowser({
url,
sessionId,
isScrapeComplete,
children,
}: {
url?: string;
sessionId: string;
isScrapeComplete: boolean;
children?: React.ReactNode;
}) {
const [isLoading, setIsLoading] = useState(true);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
// Add a slight delay before showing the browser to ensure smooth entrance
const timer = setTimeout(() => {
setIsVisible(true);
setIsLoading(false);
}, 100);
return () => clearTimeout(timer);
}, []);
return (
<main className="relative w-full h-full flex items-center justify-center bg-transparent">
<div
className={`w-full h-full max-w-[95vw] max-h-[85vh] min-w-full sm:min-w-[700px] rounded-2xl shadow-lg border border-gray-100 bg-white overflow-hidden flex flex-col transform-gpu ${
isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
} transition-all duration-300 ease-out`}
>
{/* macOS-style top bar with loading indicator */}
<div className="flex items-center justify-between px-4 py-2 border-b border-gray-100 bg-zinc-50 flex-shrink-0">
<div className="flex gap-2">
<div
className={`w-3 h-3 rounded-full transition-colors duration-200 ${
isLoading ? "bg-yellow-500" : "bg-red-500"
}`}
/>
<div
className={`w-3 h-3 rounded-full transition-colors duration-200 ${
isLoading ? "bg-yellow-500" : "bg-yellow-500"
}`}
/>
<div
className={`w-3 h-3 rounded-full transition-colors duration-200 ${
isLoading ? "bg-yellow-500" : "bg-green-500"
}`}
/>
</div>
<div className="flex items-center gap-2">
{/* Spinner */}
<div className="browser-spinner animate-spin w-4 h-4 border-2 border-zinc-300 border-t-zinc-600 rounded-full" />
</div>
</div>
{/* Content area with fade transition */}
<div
className={`flex-1 overflow-hidden transition-opacity duration-300 ${
isLoading ? "opacity-50" : "opacity-100"
}`}
>
<LivePreviewFrame
sessionId={sessionId}
onScrapeComplete={
isScrapeComplete
? () => {
console.log("Scrape complete");
setIsLoading(false);
}
: undefined
}
>
{children}
</LivePreviewFrame>
</div>
</div>
</main>
);
}
|