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

add resizing logic

Browse Source
This commit is contained in:
Ishaan Dey
2024-05-09 22:16:56 -07:00
parent 1500e84724
commit e86e86dbe2
8 changed files with 150 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,31 +5,69 @@ import {
ChevronRight,
RotateCw,
TerminalSquare,
UnfoldVertical,
} from "lucide-react";
export default function PreviewWindow() {
export default function PreviewWindow({
collapsed,
open,
}: {
collapsed: boolean;
open: () => void;
}) {
return (
<>
<div className="h-10 select-none w-full flex gap-2">
<div
className={`${
collapsed ? "h-full" : "h-10"
} select-none w-full flex gap-2`}
>
<div className="h-8 rounded-md px-3 text-xs bg-secondary flex items-center w-full justify-between">
Preview
<div className="flex space-x-1 translate-x-1">
<div className="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">
<TerminalSquare className="w-4 h-4" />
</div>
<div className="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">
<ChevronLeft className="w-4 h-4" />
</div>
<div className="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">
<ChevronRight className="w-4 h-4" />
</div>
<div className="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">
<RotateCw className="w-3 h-3" />
</div>
{collapsed ? (
<PreviewButton onClick={open}>
<UnfoldVertical className="w-4 h-4" />
</PreviewButton>
) : (
<>
<PreviewButton onClick={() => console.log("Terminal")}>
<TerminalSquare className="w-4 h-4" />
</PreviewButton>
<PreviewButton onClick={() => console.log("Back")}>
<ChevronLeft className="w-4 h-4" />
</PreviewButton>
<PreviewButton onClick={() => console.log("Forward")}>
<ChevronRight className="w-4 h-4" />
</PreviewButton>
<PreviewButton onClick={() => console.log("Reload")}>
<RotateCw className="w-3 h-3" />
</PreviewButton>
</>
)}
</div>
</div>
</div>
<div className="w-full grow rounded-md bg-foreground"></div>
{collapsed ? null : (
<div className="w-full grow rounded-md bg-foreground"></div>
)}
</>
);
}
function PreviewButton({
children,
onClick,
}: {
children: React.ReactNode;
onClick: () => void;
}) {
return (
<div
className="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>
);
}