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

start terminal ui + logic

Browse Source
This commit is contained in:
Ishaan Dey
2024-04-28 20:06:47 -04:00
parent 9726e7c249
commit ec900d3d77
12 changed files with 322 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
frontend/components/editor/sidebar/index.tsx
View File

@ -24,60 +24,67 @@ export default function Sidebar({
const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
return (
<div className="h-full w-56 select-none 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">
<button
onClick={() => setCreatingNew("file")}
className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
>
<FilePlus className="w-4 h-4" />
</button>
<button
onClick={() => setCreatingNew("folder")}
className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
>
<FolderPlus className="w-4 h-4" />
</button>
{/* Todo: Implement file searching */}
{/* <button className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
<div className="h-full w-56 select-none flex flex-col text-sm items-start justify-between p-2">
<div className="w-full flex flex-col items-start">
<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">
<button
onClick={() => setCreatingNew("file")}
className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
>
<FilePlus className="w-4 h-4" />
</button>
<button
onClick={() => setCreatingNew("folder")}
className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
>
<FolderPlus className="w-4 h-4" />
</button>
{/* Todo: Implement file searching */}
{/* <button className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
<Search className="w-4 h-4" />
</button> */}
</div>
</div>
<div className="w-full mt-1 flex flex-col">
{files.length === 0 ? (
<div className="w-full flex justify-center">
<Loader2 className="w-4 h-4 animate-spin" />
</div>
) : (
<>
{files.map((child) =>
child.type === "file" ? (
<SidebarFile
key={child.id}
data={child}
selectFile={selectFile}
handleRename={handleRename}
/>
) : (
<SidebarFolder
key={child.id}
data={child}
selectFile={selectFile}
handleRename={handleRename}
/>
)
)}
{creatingNew !== null ? (
<New
type={creatingNew}
stopEditing={() => setCreatingNew(null)}
/>
) : null}
</>
)}
</div>
</div>
<div className="w-full mt-1 flex flex-col">
{files.length === 0 ? (
<div className="w-full flex justify-center">
<Loader2 className="w-4 h-4 animate-spin" />
</div>
) : (
<>
{files.map((child) =>
child.type === "file" ? (
<SidebarFile
key={child.id}
data={child}
selectFile={selectFile}
handleRename={handleRename}
/>
) : (
<SidebarFolder
key={child.id}
data={child}
selectFile={selectFile}
handleRename={handleRename}
/>
)
)}
{creatingNew !== null ? (
<New
type={creatingNew}
stopEditing={() => setCreatingNew(null)}
/>
) : null}
</>
)}
<div className="flex items-center">
{/* <div className="text-muted-foreground">
{connected ? "Connected" : "Not connected"}
</div> */}
</div>
</div>
)