File Manager

import { FolderItem } from "@/components/chatcn/system/file-manager"
 
export default function Example() {
  return (
    <FolderItem
      name="Documents"
      onClick={() => console.log("Folder opened")}
    />
  )
}

import { FileItem } from "@/components/chatcn/system/file-manager"
 
export default function Example() {
  return (
    <FileItem
      name="image.png"
      thumbnail="/path/to/thumbnail.png"
      onClick={() => console.log("File opened")}
    />
  )
}

import { FolderItem, FileItem } from "@/components/chatcn/system/file-manager"
 
const folders = [
  { name: "Documents" },
  { name: "Pictures" },
]
 
const files = [
  { name: "photo.jpg", thumbnail: "/thumbnails/photo.jpg" },
  { name: "script.js" },
  { name: "README.md" },
]
 
export default function FileExplorer() {
  return (
    <div className="grid grid-cols-4 gap-2">
      {folders.map((folder) => (
        <FolderItem
          key={folder.name}
          name={folder.name}
          onClick={() => console.log(`Open ${folder.name}`)}
        />
      ))}
      {files.map((file) => (
        <FileItem
          key={file.name}
          name={file.name}
          thumbnail={file.thumbnail}
          onClick={() => console.log(`Open ${file.name}`)}
        />
      ))}
    </div>
  )
}