9f0b6a8fdc
* chore: rename utils.ts to fileoperations.ts * feat: replace node-pty with E2B sandboxes * added debounced function in the editor * fix: move socket connection to useRef * fix: wait until terminals are killed to close the container * fix: ensure container remains open until all owner connections are closed * fix: sync files to container instead of local file system * fix: set project file permissions so that they belong to the terminal user * fix: use the container URL for the preview panel * fix: count only the current user's sandboxes towards the limit * fix: remove hardcoded reference to localhost * fix: add error handling to the backend * docs: add information about E2B --------- Co-authored-by: Akhilesh Rangani <akhileshrangani4@gmail.com>
106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Globe,
|
|
Link,
|
|
RotateCw,
|
|
TerminalSquare,
|
|
UnfoldVertical,
|
|
} from "lucide-react"
|
|
import { useRef, useState } from "react"
|
|
import { toast } from "sonner"
|
|
|
|
export default function PreviewWindow({
|
|
collapsed,
|
|
open,
|
|
src
|
|
}: {
|
|
collapsed: boolean
|
|
open: () => void
|
|
src: string
|
|
}) {
|
|
const ref = useRef<HTMLIFrameElement>(null)
|
|
const [iframeKey, setIframeKey] = useState(0)
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={`${
|
|
collapsed ? "h-full" : "h-10"
|
|
} select-none w-full flex gap-2`}
|
|
>
|
|
<div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
|
|
<div className="text-xs">Preview</div>
|
|
<div className="flex space-x-1 translate-x-1">
|
|
{collapsed ? (
|
|
<PreviewButton onClick={open}>
|
|
<UnfoldVertical className="w-4 h-4" />
|
|
</PreviewButton>
|
|
) : (
|
|
<>
|
|
{/* Todo, make this open inspector */}
|
|
{/* <PreviewButton disabled onClick={() => {}}>
|
|
<TerminalSquare className="w-4 h-4" />
|
|
</PreviewButton> */}
|
|
|
|
<PreviewButton
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(src)
|
|
toast.info("Copied preview link to clipboard")
|
|
}}
|
|
>
|
|
<Link className="w-4 h-4" />
|
|
</PreviewButton>
|
|
<PreviewButton
|
|
onClick={() => {
|
|
// if (ref.current) {
|
|
// ref.current.contentWindow?.location.reload();
|
|
// }
|
|
setIframeKey((prev) => prev + 1)
|
|
}}
|
|
>
|
|
<RotateCw className="w-3 h-3" />
|
|
</PreviewButton>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{collapsed ? null : (
|
|
<div className="w-full grow rounded-md overflow-hidden bg-foreground">
|
|
<iframe
|
|
key={iframeKey}
|
|
ref={ref}
|
|
width={"100%"}
|
|
height={"100%"}
|
|
src={src}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function PreviewButton({
|
|
children,
|
|
disabled = false,
|
|
onClick,
|
|
}: {
|
|
children: React.ReactNode
|
|
disabled?: boolean
|
|
onClick: () => void
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`${
|
|
disabled ? "pointer-events-none opacity-50" : ""
|
|
} p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm`}
|
|
onClick={onClick}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|