Completed file explorer interface

src/components/applications/file-explorer/FileExplorer.jsx

@@ -2,7 +2,24 @@ import { useState } from "react";
 import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js";
 import styles from "./FileExplorer.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFileLines, faHouse, faImage, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFile, faFileLines, faFolder, faHouse, faImage, faSearch } from "@fortawesome/free-solid-svg-icons";
+
+function FilePreview({ file }) {
+	let preview;
+
+	console.log(file);
+
+	switch (file.extension) {
+		case "png":
+			preview = <FontAwesomeIcon icon={faImage}/>
+			break;
+		default:
+			preview = <FontAwesomeIcon icon={faFile}/>
+			break;
+	}
+
+	return preview;
+}
 
 export function FileExplorer() {
 	const virtualRoot = useVirtualRoot();
@@ -22,7 +39,7 @@ export function FileExplorer() {
 
 	const onPathChange = (event) => {
 		return setPath(event.target.value);
-	}
+	};
 
 	const onKeyDown = (event) => {
 		const value = event.target.value;
@@ -78,7 +95,18 @@ export function FileExplorer() {
 					</button>
 				</div>
 				<div className={styles.Main}>
-
+					{currentDirectory.files.map((file, index) => 
+						<button key={index} className={styles["File-button"]}>
+							<FilePreview file={file}/>
+							<p>{file.id}</p>
+						</button>
+					)}
+					{currentDirectory.subFolders.map(({ name }, index) => 
+						<button key={index} className={styles["Folder-button"]} onClick={() => { changeDirectory(name) }}>
+							<FontAwesomeIcon icon={faFolder}/>
+							<p>{name}</p>
+						</button>
+					)}
 				</div>
 			</div>
 		</div>

src/components/applications/file-explorer/FileExplorer.module.css

@@ -1,6 +1,7 @@
 .Container {
 	--header-height: 3.5rem;
 	--sidebar-width: 10rem;
+	--scale: 1rem;
 
 	display: flex;
 	flex-direction: column;
@@ -69,6 +70,7 @@
 	flex: 1;
 	display: flex;
 	width: 100%;
+	height: calc(100% - var(--header-height));
 	background-color: var(--background-color-c);
 }
 
@@ -97,7 +99,7 @@
 	border-radius: 0.5rem;
 	outline: none;
 	cursor: pointer;
-	transition: background-color 200ms ease-in-out;
+	transition: background-color 100ms ease-in-out;
 }
 
 .Nav-button:hover {
@@ -111,5 +113,42 @@
 
 .Main {
 	flex: 1;
+	display: flex;
+	flex-wrap: wrap;
 	height: 100%;
+	padding: 0.5rem;
+	overflow: auto;
+}
+
+.File-button, .Folder-button {
+	display: flex;
+	gap: 0.5rem;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: calc(var(--scale) * 7.5);
+	height: calc(var(--scale) * 7.5);
+	padding: 0.5rem;
+	background: none;
+	border: none;
+	border-radius: 0.5rem;
+	outline: none;
+	cursor: pointer;
+	transition: background-color 100ms ease-in-out;
+}
+
+.File-button:hover, .Folder-button:hover {
+	background-color: rgba(255, 255, 255, 10%);
+}
+
+.File-button svg, .Folder-button svg {
+	width: 50%;
+	height: auto;
+	aspect-ratio: 1;
+}
+
+.File-button p, .Folder-button p {
+	max-width: 100%;
+	margin: 0;
+	word-wrap: break-word;
 }

src/features/virtual-drive/virtual-folder.js

@@ -244,7 +244,12 @@ export class VirtualFolder extends VirtualBase {
 
 		if (lastSegment === "") {
 			return currentDirectory;
-		} else if (currentDirectory !== null) {
+		} else if (currentDirectory != null) {
+			const folder = currentDirectory.findSubFolder(lastSegment);
+
+			if (folder != null)
+				return folder;
+
 			// To do: add support for file names with dots
 			const [name, extension] = lastSegment.split(".");
 			return currentDirectory.findFile(name, extension);

src/features/virtual-drive/virtual-root.js

@@ -23,6 +23,18 @@ export class VirtualRoot extends VirtualFolder {
 		return this;
 	}
 
+	static isValidName(name) {
+		// TO DO
+	}
+
+	static isValidFileName(name) {
+		// TO DO
+	}
+
+	static isValidFolderName(name) {
+		// TO DO
+	}
+
 	get path() {
 		return "";
 	}