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

tab ui

Browse Source
This commit is contained in:
Ishaan Dey 2024-04-08 23:40:42 -04:00
parent f32d84d2c2
commit dce7166a91
4 changed files with 82 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/page.tsx
View File

@ -1,3 +1,4 @@
import Navbar from "@/components/navbar"
import dynamic from "next/dynamic"
import Image from "next/image"
@ -8,7 +9,7 @@ const CodeEditor = dynamic(() => import("@/components/editor"), {
export default function Home() {
return (
<div className="w-screen flex flex-col h-screen bg-background">
<div className="h-12 flex">NAVBAR</div>
<Navbar />
<div className="w-screen flex grow">
<CodeEditor />
</div>

68
components/editor/index.tsx
View File

@ -11,7 +11,16 @@ import {
ResizablePanelGroup,
} from "@/components/ui/resizable"
import { Button } from "../ui/button"
import { X } from "lucide-react"
import {
ChevronLeft,
ChevronRight,
RotateCcw,
RotateCw,
Terminal,
TerminalSquare,
X,
} from "lucide-react"
import Tab from "../ui/tab"
export default function CodeEditor() {
const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
@ -65,22 +74,10 @@ export default function CodeEditor() {
defaultSize={60}
>
<div className="h-10 w-full flex gap-2">
<Button
size="sm"
className="min-w-20 justify-between"
variant="secondary"
>
index.html <X className="w-3 h-3" />
</Button>
<Button
size="sm"
className="min-w-20 justify-between"
variant="secondary"
>
style.css <X className="w-3 h-3" />
</Button>
<Tab>index.html</Tab>
<Tab>style.css</Tab>
</div>
<div className="grow w-full overflow-hidden rounded-lg">
<div className="grow w-full overflow-hidden rounded-md">
<Editor
height="100%"
defaultLanguage="typescript"
@ -97,16 +94,26 @@ export default function CodeEditor() {
minSize={20}
className="p-2 flex flex-col"
>
<div className="h-10 w-full flex gap-2">
<Button
size="sm"
className="min-w-20 justify-between"
variant="secondary"
>
localhost:3000 <X className="w-3 h-3" />
</Button>
<div className="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 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 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 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 rounded-sm">
<RotateCw className="w-3 h-3" />
</div>
</div>
</div>
</div>
<div className="w-full grow rounded-lg bg-foreground"></div>
<div className="w-full grow rounded-md bg-foreground"></div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel
@ -115,15 +122,10 @@ export default function CodeEditor() {
className="p-2 flex flex-col"
>
<div className="h-10 w-full flex gap-2">
<Button
size="sm"
className="min-w-20 justify-between"
variant="secondary"
>
Node <X className="w-3 h-3" />
</Button>
<Tab>Node</Tab>
<Tab>Console</Tab>
</div>
<div className="w-full grow rounded-lg bg-secondary"></div>
<div className="w-full grow rounded-md bg-secondary"></div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>

14
components/navbar/index.tsx Normal file
View File

@ -0,0 +1,14 @@
import { ChevronLeft, Home } from "lucide-react"
import { Button } from "../ui/button"
export default function Navbar() {
return (
<div className="h-12 px-2 w-full flex items-center justify-between">
<div className="flex items-center">
<Button variant="outline">
<ChevronLeft className="w-4 h-4 mr-2" /> Go Home
</Button>
</div>
</div>
)
}

31
components/ui/tab.tsx Normal file
View File

@ -0,0 +1,31 @@
"use client"
import { X } from "lucide-react"
import { Button } from "./button"
export default function Tab({
children,
onClick,
onClose,
}: {
children: React.ReactNode
onClick?: () => void
onClose?: () => void
}) {
return (
<Button
onClick={onClick ?? undefined}
size="sm"
variant="secondary"
className="group select-none"
>
{children}
<div
onClick={onClose ?? undefined}
className=" p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
>
<X className="w-3 h-3" />
</div>
</Button>
)
}