File size: 2,117 Bytes
621b880 2a3d5f5 621b880 f4987a4 621b880 012b5ba 621b880 f4987a4 621b880 f4987a4 621b880 |
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 |
import { useStore } from '@nanostores/react';
import { memo, useEffect, useRef, useState } from 'react';
import { IconButton } from '~/components/ui/IconButton';
import { workbenchStore } from '~/lib/stores/workbench';
export const Preview = memo(() => {
const iframeRef = useRef<HTMLIFrameElement>(null);
const [activePreviewIndex] = useState(0);
const previews = useStore(workbenchStore.previews);
const activePreview = previews[activePreviewIndex];
const [url, setUrl] = useState('');
const [iframeUrl, setIframeUrl] = useState<string | undefined>();
useEffect(() => {
if (!activePreview) {
setUrl('');
setIframeUrl(undefined);
return;
}
if (!iframeUrl) {
const { baseUrl } = activePreview;
setUrl(baseUrl);
setIframeUrl(baseUrl);
}
}, [activePreview, iframeUrl]);
const reloadPreview = () => {
if (iframeRef.current) {
iframeRef.current.src = iframeRef.current.src;
}
};
return (
<div className="w-full h-full flex flex-col">
<div className="bg-white p-2 flex items-center gap-1.5">
<IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
<div className="flex items-center gap-1 flex-grow bg-gray-100 rounded-full px-3 py-1 text-sm text-gray-600 hover:bg-gray-200 hover:focus-within:bg-white focus-within:bg-white focus-within:ring-2 focus-within:ring-accent">
<div className="bg-white rounded-full p-[2px] -ml-1">
<div className="i-ph:info-bold text-lg" />
</div>
<input
className="w-full bg-transparent outline-none"
type="text"
value={url}
onChange={(event) => {
setUrl(event.target.value);
}}
/>
</div>
</div>
<div className="flex-1 bg-white border-t">
{activePreview ? (
<iframe ref={iframeRef} className="border-none w-full h-full" src={iframeUrl} />
) : (
<div className="flex w-full h-full justify-center items-center">No preview available</div>
)}
</div>
</div>
);
});
|