Spaces:
Build error
Build error
File size: 2,005 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 |
"use client";
import { useEffect, useState, useCallback } from "react";
import { motion } from "framer-motion";
import WebBrowser from "./web-browser";
let interval: NodeJS.Timeout;
type BrowserData = {
id: number;
sessionId: string;
isScrapeComplete: boolean;
children?: React.ReactNode;
};
export default function MultipleWebBrowsers({
browsers,
offset,
scaleFactor,
autoRotate = true,
rotationInterval = 5000,
}: {
browsers: BrowserData[];
offset?: number;
scaleFactor?: number;
autoRotate?: boolean;
rotationInterval?: number;
}) {
const CARD_OFFSET = offset || 10;
const SCALE_FACTOR = scaleFactor || 0.06;
const [activeBrowsers, setActiveBrowsers] = useState<BrowserData[]>(browsers);
const startRotation = useCallback(() => {
interval = setInterval(() => {
setActiveBrowsers((prevBrowsers: BrowserData[]) => {
const newArray = [...prevBrowsers];
newArray.unshift(newArray.pop()!); // move the last element to the front
return newArray;
});
}, rotationInterval);
}, [rotationInterval]);
useEffect(() => {
if (autoRotate) {
startRotation();
}
return () => clearInterval(interval);
}, [autoRotate, startRotation]);
return (
<div className="relative h-[600px] w-full">
{activeBrowsers.map((browser, index) => {
return (
<motion.div
key={browser.id}
className="absolute w-full rounded-xl overflow-hidden"
style={{
transformOrigin: "top center",
}}
animate={{
top: index * -CARD_OFFSET,
scale: 1 - index * SCALE_FACTOR,
zIndex: activeBrowsers.length - index,
}}
>
<WebBrowser
sessionId={browser.sessionId}
isScrapeComplete={browser.isScrapeComplete}
>
{browser.children}
</WebBrowser>
</motion.div>
);
})}
</div>
);
}
|