file tree logic
This commit is contained in:
Ishaan Dey
parent
501fa418f1
commit
b49f49ca19
@ -1,65 +0,0 @@
|
|||||||
import {
|
|
||||||
File,
|
|
||||||
FilePlus,
|
|
||||||
Folder,
|
|
||||||
FolderOpen,
|
|
||||||
FolderPlus,
|
|
||||||
Search,
|
|
||||||
} from "lucide-react"
|
|
||||||
import Image from "next/image"
|
|
||||||
import { getIconForFile } from "vscode-icons-js"
|
|
||||||
|
|
||||||
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">
|
|
||||||
{getIconForFile("index.html") ? (
|
|
||||||
<Image
|
|
||||||
src={`/icons/${getIconForFile("index.html")}`}
|
|
||||||
alt="File Icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<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">
|
|
||||||
{getIconForFile("index.html") ? (
|
|
||||||
<Image
|
|
||||||
src={`/icons/${getIconForFile("style.css")}`}
|
|
||||||
alt="File Icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<File className="w-4 h-4 mr-2" />
|
|
||||||
)}
|
|
||||||
style.css
|
|
||||||
</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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
20
components/editor/sidebar/file.tsx
Normal file
20
components/editor/sidebar/file.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import Image from "next/image"
|
||||||
|
import { getIconForFile } from "vscode-icons-js"
|
||||||
|
import { TFile } from "./types"
|
||||||
|
|
||||||
|
export default function SidebarFile({ data }: { data: TFile }) {
|
||||||
|
return (
|
||||||
|
<div className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer">
|
||||||
|
<Image
|
||||||
|
src={`/icons/${getIconForFile(data.name)}`}
|
||||||
|
alt="File Icon"
|
||||||
|
width={18}
|
||||||
|
height={18}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
{data.name}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
46
components/editor/sidebar/folder.tsx
Normal file
46
components/editor/sidebar/folder.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import Image from "next/image"
|
||||||
|
import { useState } from "react"
|
||||||
|
import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
|
||||||
|
import { TFolder } from "./types"
|
||||||
|
import SidebarFile from "./file"
|
||||||
|
|
||||||
|
export default function SidebarFolder({ data }: { data: TFolder }) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
const folder = isOpen
|
||||||
|
? getIconForOpenFolder(data.name)
|
||||||
|
: getIconForFolder(data.name)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
onClick={() => setIsOpen((prev) => !prev)}
|
||||||
|
className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={`/icons/${folder}`}
|
||||||
|
alt="Folder icon"
|
||||||
|
width={18}
|
||||||
|
height={18}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
{data.name}
|
||||||
|
</div>
|
||||||
|
{isOpen ? (
|
||||||
|
<div className="flex w-full items-stretch">
|
||||||
|
<div className="w-[1px] bg-border mx-2 h-full"></div>
|
||||||
|
<div className="flex flex-col grow">
|
||||||
|
{data.children.map((child) =>
|
||||||
|
child.type === "file" ? (
|
||||||
|
<SidebarFile key={child.id} data={child} />
|
||||||
|
) : (
|
||||||
|
<SidebarFolder key={child.id} data={child} />
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
95
components/editor/sidebar/index.tsx
Normal file
95
components/editor/sidebar/index.tsx
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
import { FilePlus, FolderPlus, Search } from "lucide-react"
|
||||||
|
import SidebarFile from "./file"
|
||||||
|
import SidebarFolder from "./folder"
|
||||||
|
import { TFile, TFolder } from "./types"
|
||||||
|
|
||||||
|
const data: (TFile | TFolder)[] = [
|
||||||
|
{
|
||||||
|
id: "index.tsx",
|
||||||
|
type: "file",
|
||||||
|
name: "index.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "components",
|
||||||
|
type: "folder",
|
||||||
|
name: "components",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: "navbar.tsx",
|
||||||
|
type: "file",
|
||||||
|
name: "navbar.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "ui",
|
||||||
|
type: "folder",
|
||||||
|
name: "ui",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: "Button.tsx",
|
||||||
|
type: "file",
|
||||||
|
name: "Button.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Input.tsx",
|
||||||
|
type: "file",
|
||||||
|
name: "Input.tsx",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "App.tsx",
|
||||||
|
type: "file",
|
||||||
|
name: "App.tsx",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "styles",
|
||||||
|
type: "folder",
|
||||||
|
name: "styles",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: "style.css",
|
||||||
|
type: "file",
|
||||||
|
name: "style.css",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "index.css",
|
||||||
|
type: "file",
|
||||||
|
name: "index.css",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
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-1 flex flex-col">
|
||||||
|
{/* <SidebarFile name="index.tsx" />
|
||||||
|
<SidebarFolder name="styles" /> */}
|
||||||
|
{data.map((child) =>
|
||||||
|
child.type === "file" ? (
|
||||||
|
<SidebarFile key={child.id} data={child} />
|
||||||
|
) : (
|
||||||
|
<SidebarFolder key={child.id} data={child} />
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
12
components/editor/sidebar/types.ts
Normal file
12
components/editor/sidebar/types.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
export type TFolder = {
|
||||||
|
id: string
|
||||||
|
type: "folder"
|
||||||
|
name: string
|
||||||
|
children: (TFile | TFolder)[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TFile = {
|
||||||
|
id: string
|
||||||
|
type: "file"
|
||||||
|
name: string
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user