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

start file/folder ui

Browse Source
This commit is contained in:
Ishaan Dey 2024-04-28 01:33:28 -04:00
parent e4c4c18749
commit 9726e7c249
4 changed files with 94 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/editor/sidebar/file.tsx
View File

@ -66,7 +66,7 @@ export default function SidebarFile({
>
<input
ref={inputRef}
className={`bg-transparent outline-foreground w-full ${
className={`bg-transparent transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-sm w-full ${
editing ? "" : "pointer-events-none"
}`}
disabled={!editing}

2
frontend/components/editor/sidebar/folder.tsx
View File

@ -59,7 +59,7 @@ export default function SidebarFolder({
>
<input
ref={inputRef}
className={`bg-transparent outline-foreground w-full ${
className={`bg-transparent transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-sm w-full ${
editing ? "" : "pointer-events-none"
}`}
disabled={!editing}

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

@ -4,6 +4,8 @@ import { FilePlus, FolderPlus, Loader2, Search } from "lucide-react"
import SidebarFile from "./file"
import SidebarFolder from "./folder"
import { TFile, TFolder, TTab } from "./types"
import { useState } from "react"
import New from "./new"
export default function Sidebar({
files,
@ -19,20 +21,29 @@ export default function Sidebar({
type: "file" | "folder"
) => boolean
}) {
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">
<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">
<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" />
</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">
</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" />
</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">
</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" />
</div>
</button> */}
</div>
</div>
<div className="w-full mt-1 flex flex-col">
@ -41,23 +52,31 @@ export default function Sidebar({
<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}
<>
{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)}
/>
) : (
<SidebarFolder
key={child.id}
data={child}
selectFile={selectFile}
handleRename={handleRename}
/>
)
)
) : null}
</>
)}
</div>
</div>

51
frontend/components/editor/sidebar/new.tsx Normal file
View File

@ -0,0 +1,51 @@
"use client"
import Image from "next/image"
import { useEffect, useRef } from "react"
export default function New({
type,
stopEditing,
}: {
type: "file" | "folder"
stopEditing: () => void
}) {
const inputRef = useRef<HTMLInputElement>(null)
const createFile = () => {
console.log("Create File")
stopEditing()
}
useEffect(() => {
inputRef.current?.focus()
}, [])
return (
<div className="w-full flex items-center h-7 px-1 hover:bg-secondary rounded-sm cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
<Image
src={
type === "file"
? "/icons/default_file.svg"
: "/icons/default_folder.svg"
}
alt="File Icon"
width={18}
height={18}
className="mr-2"
/>
<form
onSubmit={(e) => {
e.preventDefault()
createFile()
}}
>
<input
ref={inputRef}
className={`bg-transparent transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-sm w-full`}
onBlur={() => createFile()}
/>
</form>
</div>
)
}