I'll create a clean folder directory UI using Next.js and shadcn/ui components. This UI will display a folder structure with dummy files and allow for basic navigation.

Let's create the folder directory UI:

This folder directory UI provides a clean and interactive way to display a file system structure. Here's a breakdown of what we've created:

1. The main page.tsx file renders the FolderDirectory component within a container.
2. The FolderDirectory component is the core of our UI. It uses a recursive structure to render folders and files.
3. We're using shadcn/ui's Button component for the expand/collapse functionality.
4. Icons from lucide-react are used to represent folders and files.
5. The component is responsive and will adapt to different screen sizes.

Key features:

• Folders can be expanded and collapsed by clicking on the chevron icon.
• Files and folders are visually distinct with different icons and colors.
• The structure is easily customizable by modifying the dummyFileSystem array.

To use this in your Next.js project:

1. Make sure you have shadcn/ui set up in your project.
2. Copy the component files into your project structure.
3. Adjust the imports if necessary to match your project's file structure.
4. You can customize the dummyFileSystem array to represent your desired folder structure.

This implementation provides a solid foundation for a folder directory UI. You can further enhance it by adding features like file/folder selection, context menus, or drag-and-drop functionality as needed.

I'll update the folder directory UI to include text file previews and the ability to edit text files. We'll remove the image files and focus on text-based content. Let's enhance our existing implementation.

Let's update our folder directory UI with these new features:

This updated folder directory UI now includes the following enhancements:

1. Text file previews: When you click on a file, a modal opens showing the content of the file.
2. File editing: You can edit the content of text files directly in the modal.
3. Updated dummy file system: We've removed image files and focused on text-based content only.

Key features:

• Click on any file to open a preview modal.
• In the preview modal, you can view the file content and switch to edit mode.
• Edit the file content and save your changes (changes are stored in memory for this example).
• The folder structure remains interactive, allowing you to expand and collapse folders.

To use this in your Next.js project:

1. Ensure you have shadcn/ui set up in your project.
2. Copy the component files into your project structure.
3. Adjust the imports if necessary to match your project's file structure.
4. You can customize the dummyFileSystem array in the folder-directory.tsx file to represent your desired folder structure and file contents.

This implementation provides a more interactive folder directory UI with file preview and editing capabilities. You can further enhance it by adding features like file creation, deletion, or even connecting it to a backend to persist changes.