iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: workbench store and move logic into action runner (#4)

Browse Source
This commit is contained in:
Dominic Elm
2024-07-22 17:40:28 +02:00
committed by GitHub
parent cae55a7026
commit f4987a4ecd
10 changed files with 295 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/bolt/app/components/workbench/Preview.tsx
View File

@@ -13,7 +13,14 @@ export const Preview = memo(() => {
const [iframeUrl, setIframeUrl] = useState<string | undefined>();
useEffect(() => {
if (activePreview && !iframeUrl) {
if (!activePreview) {
setUrl('');
setIframeUrl(undefined);
return;
}
if (!iframeUrl) {
const { baseUrl } = activePreview;
setUrl(baseUrl);
@@ -31,16 +38,16 @@ export const Preview = memo(() => {
<div className="w-full h-full flex flex-col">
<div className="bg-gray-100 rounded-t-lg p-2 flex items-center space-x-1.5">
<div className="flex items-center gap-2 text-gray-800">
<div className="i-ph:app-window-duotone scale-130 ml-1.5"></div>
<div className="i-ph:app-window-duotone scale-130 ml-1.5" />
<span className="text-sm">Preview</span>
</div>
<div className="flex-grow"></div>
<div className="flex-grow" />
</div>
<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>
<div className="i-ph:info-bold text-lg" />
</div>
<input
className="w-full bg-transparent outline-none"
@@ -54,7 +61,7 @@ export const Preview = memo(() => {
</div>
<div className="flex-1 bg-white border-t">
{activePreview ? (
<iframe ref={iframeRef} className="border-none w-full h-full" src={iframeUrl}></iframe>
<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>
)}