TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: format frontend code

Browse Source
This commit is contained in:
Akhilesh Rangani
2024-10-21 13:57:45 -06:00
parent 2897b908fd
commit 6fb1364d6f
64 changed files with 1421 additions and 1272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/components/editor/preview/index.tsx
View File

@ -1,66 +1,69 @@
"use client"
import { Link, RotateCw, UnfoldVertical } from "lucide-react"
import {
Link,
RotateCw,
TerminalSquare,
UnfoldVertical,
} from "lucide-react"
import { useEffect, useRef, useState, useImperativeHandle, forwardRef } from "react"
forwardRef,
useEffect,
useImperativeHandle,
useRef,
useState,
} 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
}>) {
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)
setIframeKey((prev) => prev + 1)
}
// Refresh the preview when the URL changes.
// 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 ? (
<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={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>
<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>
</>
)
})
@ -76,8 +79,9 @@ function PreviewButton({
}) {
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`}
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}