diff --git a/public/media/applications/icons/text-editor.svg b/public/media/applications/icons/text-editor.svg
new file mode 100644
index 0000000..32946dd
--- /dev/null
+++ b/public/media/applications/icons/text-editor.svg
@@ -0,0 +1,57 @@
+
diff --git a/src/components/applications/.common/HeaderMenu.jsx b/src/components/applications/.common/HeaderMenu.jsx
new file mode 100644
index 0000000..ba9513a
--- /dev/null
+++ b/src/components/applications/.common/HeaderMenu.jsx
@@ -0,0 +1,36 @@
+import { DropdownButton } from "../../utils/DropdownButton.jsx";
+import styles from "./HeaderMenu.module.css";
+
+/**
+ * @param {Object} props
+ * @param {Function} props.onNew
+ * @param {Function} props.onOpen
+ * @param {Function} props.onSave
+ * @param {Function} props.onSaveAs
+ * @param {Function} props.onExit
+ */
+export function HeaderMenu({ onNew, onOpen, onSave, onSaveAs, onExit }) {
+ return (
+
+ {
+ onNew?.();
+ },
+ "Open": () => {
+ onOpen?.();
+ },
+ "Save": () => {
+ onSave?.();
+ },
+ "Save as": () => {
+ onSaveAs?.();
+ },
+ "Exit": () => {
+ onExit?.();
+ },
+ }}/>
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/applications/.common/HeaderMenu.module.css b/src/components/applications/.common/HeaderMenu.module.css
new file mode 100644
index 0000000..237e095
--- /dev/null
+++ b/src/components/applications/.common/HeaderMenu.module.css
@@ -0,0 +1,6 @@
+.Container {
+ display: flex;
+ width: 100%;
+ height: 1.25rem;
+ background-color: var(--background-color-a);
+}
\ No newline at end of file
diff --git a/src/components/applications/templates/WebView.jsx b/src/components/applications/.templates/WebView.jsx
similarity index 100%
rename from src/components/applications/templates/WebView.jsx
rename to src/components/applications/.templates/WebView.jsx
diff --git a/src/components/applications/templates/WebView.module.css b/src/components/applications/.templates/WebView.module.css
similarity index 100%
rename from src/components/applications/templates/WebView.module.css
rename to src/components/applications/.templates/WebView.module.css
diff --git a/src/components/applications/file-explorer/FileExplorer.jsx b/src/components/applications/file-explorer/FileExplorer.jsx
index 8a2ef8e..2a4b8aa 100644
--- a/src/components/applications/file-explorer/FileExplorer.jsx
+++ b/src/components/applications/file-explorer/FileExplorer.jsx
@@ -18,6 +18,9 @@ function FilePreview({ file }) {
case "png":
preview =
break;
+ case "txt":
+ preview =
+ break;
default:
preview =
break;
diff --git a/src/components/applications/text-editor/TextEditor.jsx b/src/components/applications/text-editor/TextEditor.jsx
new file mode 100644
index 0000000..736cc0e
--- /dev/null
+++ b/src/components/applications/text-editor/TextEditor.jsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+// eslint-disable-next-line no-unused-vars
+import { VirtualFile } from "../../../features/virtual-drive/virtual-file.js";
+import styles from "./TextEditor.module.css";
+import { HeaderMenu } from "../.common/HeaderMenu.jsx";
+
+/**
+ * @param {Object} props
+ * @param {VirtualFile} props.file
+ */
+export function TextEditor({ file }) {
+ const [currentFile, setCurrentFile] = useState(file);
+ const [content, setContent] = useState(file?.content);
+
+ useEffect(() => {
+ setContent(currentFile?.content ?? "");
+ }, [currentFile]);
+
+ const newText = () => {
+ setCurrentFile(null);
+ }
+
+ const saveTextAs = () => {
+
+ }
+
+ const saveText = () => {
+ if (currentFile == null)
+ return saveTextAs();
+
+ currentFile.content = content;
+ }
+
+ const onChange = (event) => {
+ const value = event.target.value;
+ return setContent(value);
+ };
+
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/applications/text-editor/TextEditor.module.css b/src/components/applications/text-editor/TextEditor.module.css
new file mode 100644
index 0000000..fd2c217
--- /dev/null
+++ b/src/components/applications/text-editor/TextEditor.module.css
@@ -0,0 +1,17 @@
+.Container {
+ width: 100%;
+ height: 100%;
+}
+
+.View {
+ width: 100%;
+ height: 100%;
+ padding: 1rem;
+ color: var(--foreground-color-a);
+ background-color: var(--background-color-c);
+ border: none;
+ outline: none;
+ font-size: 1rem;
+ font-family: var(--body-font-family);
+ resize: none;
+}
\ No newline at end of file
diff --git a/src/components/utils/DropdownButton.jsx b/src/components/utils/DropdownButton.jsx
new file mode 100644
index 0000000..7180eab
--- /dev/null
+++ b/src/components/utils/DropdownButton.jsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import styles from "./DropdownButton.module.css";
+import OutsideClickListener from "../../hooks/utils/outsideClick.js";
+
+/**
+ * @param {Object} props
+ * @param {String} props.label
+ * @param {Object.} props.options
+ * @returns
+ */
+export function DropdownButton({ label, options }) {
+ const [open, setOpen] = useState(false);
+
+ return (
+ { setOpen(false); }}>
+
+
+ {open && options
+ ? (
+ {Object.entries(options).map(([label, callback]) =>
+
+ )}
+
)
+ : null
+ }
+
{children}
;
+}
diff --git a/src/hooks/virtual-drive/VirtualRootContext.js b/src/hooks/virtual-drive/VirtualRootContext.js
index 7a1f265..39de13d 100644
--- a/src/hooks/virtual-drive/VirtualRootContext.js
+++ b/src/hooks/virtual-drive/VirtualRootContext.js
@@ -46,9 +46,13 @@ function initVirtualRoot(virtualRoot) {
file.setSource("/media/wallpapers/wallpaper3.png")
}).createFile("Wallpaper_4", "png", (file) => {
file.setSource("/media/wallpapers/wallpaper4.png")
- })
+ });
+ })
+ .createFolder("Documents", (folder) => {
+ folder.createFile("text", "txt", (file) => {
+ file.setContent("Hello world!");
+ });
})
- .createFolder("Documents")
.createFolder("Desktop");
});
});