sandbox-web-ide/frontend/components/editor/preview/index.tsx

"use client"

import {
  Link,
  RotateCw,
  TerminalSquare,
  UnfoldVertical,
} from "lucide-react"
import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from "react"
import { toast } from "sonner"

export default forwardRef(function PreviewWindow({
  collapsed,
  open,
  src
}: {
  collapsed: boolean
  open: () => void
  src: string
},
ref: React.Ref<{
  refreshIframe: () => void
}>) {
  const frameRef = useRef<HTMLIFrameElement>(null)
  const [iframeKey, setIframeKey] = useState(0)
  const refreshIframe = () => {
    setIframeKey(prev => prev + 1)
  }
  // Refresh the preview when the URL changes. 
  useEffect(refreshIframe, [src])
  // Expose refreshIframe method to the parent.
  useImperativeHandle(ref, () => ({ refreshIframe }))

  return (
    <>
        <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>
            ) : (
              <>
                <PreviewButton onClick={open}>
                  <UnfoldVertical 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={refreshIframe}>
                  <RotateCw className="w-3 h-3" />
                </PreviewButton>
              </>
            )}
          </div>
        </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>
  )
}