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

start sidebar

Browse Source
This commit is contained in:
Ishaan Dey 2024-04-09 00:50:48 -04:00
parent 5c4d114f14
commit d874813586
5 changed files with 48 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/code/[id]/page.tsx
View File

@ -1,6 +1,5 @@
import Navbar from "@/components/navbar"
import dynamic from "next/dynamic"
import Image from "next/image"
const CodeEditor = dynamic(() => import("@/components/editor"), {
ssr: false,
@ -8,7 +7,7 @@ const CodeEditor = dynamic(() => import("@/components/editor"), {
export default function CodePage() {
return (
<div className="w-screen flex flex-col h-screen bg-background">
<div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
<Navbar />
<div className="w-screen flex grow">
<CodeEditor />

11
components/editor/index.tsx
View File

@ -21,6 +21,7 @@ import {
X,
} from "lucide-react"
import Tab from "../ui/tab"
import Sidebar from "./sidebar"
export default function CodeEditor() {
const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
@ -65,7 +66,7 @@ export default function CodeEditor() {
return (
<>
<div className="h-full w-52"></div>
<Sidebar />
<ResizablePanelGroup direction="horizontal">
<ResizablePanel
className="p-2 flex flex-col"
@ -108,16 +109,16 @@ export default function CodeEditor() {
<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">
<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 rounded-sm">
<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 rounded-sm">
<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 rounded-sm">
<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>
</div>

39
components/editor/sidebar.tsx Normal file
View File

@ -0,0 +1,39 @@
import {
File,
FilePlus,
Folder,
FolderOpen,
FolderPlus,
Search,
} from "lucide-react"
export default function Sidebar() {
return (
<div className="h-full w-56 flex flex-col text-sm items-start p-2">
<div className="flex w-full items-center justify-between h-8 mb-1 ">
<div className="text-muted-foreground">EXPLORER</div>
<div className="flex space-x-1">
<div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
<FilePlus className="w-4 h-4" />
</div>
<div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
<FolderPlus className="w-4 h-4" />
</div>
<div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
<Search className="w-4 h-4" />
</div>
</div>
</div>
<div className="w-full mt-2">
<div className="w-full flex items-center h-6 transition-colors hover:text-muted-foreground cursor-pointer">
<File className="w-4 h-4 mr-2" />
index.html
</div>
<div className="w-full flex items-center h-6 transition-colors hover:text-muted-foreground cursor-pointer">
<Folder className="w-4 h-4 mr-2" />
styles
</div>
</div>
</div>
)
}

2
components/navbar/index.tsx
View File

@ -12,7 +12,7 @@ export default function Navbar() {
</button>
<div className="text-sm font-medium flex items-center">
My React Project{" "}
<div className="h-7 w-7 ml-1 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-md">
<div className="h-7 w-7 ml-1 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
<Pencil className="w-4 h-4" />
</div>
</div>

2
components/ui/tab.tsx
View File

@ -22,7 +22,7 @@ export default function Tab({
{children}
<div
onClick={onClose ?? undefined}
className="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"
className="h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm"
>
<X className="w-3 h-3" />
</div>