Updated example

Author: abel-tefera

package-lock.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@litecode-ide/virtual-file-system": "^1.0.2",
+    "@litecode-ide/virtual-file-system": "^1.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package.json

@@ -20,21 +20,30 @@ function App() {
   };
 
   const getFileContents = (id?: string) => {
-    if (!id) {
-      const newID = getSelectedFile();
-      id = newID;
+    if (id === "") {
+      return "";
     }
-    if (!id) return "";
-    return Object.values(getFileTree()).find(({ id: _id }) => _id === id)
+    return Object.values(getFileTree()).find(({ id: _id }) => _id === id)!
       .content;
   };
 
   return (
     <div className="flex h-screen w-screen overflow-clip">
       <div className="flex flex-col h-full w-1/4">
-        <SearchInput />
+        <SearchInput className="bg-neutral-500 text-neutral-300 hover:bg-neutral-600 active:bg-neutral-600 focus:bg-neutral-600" />
         <FileExplorer
-          validExtensions={["js", "css", "html"]}
+          validExtensions={[
+            "js",
+            "ts",
+            "tsx",
+            "jsx",
+            "json",
+            "md",
+            "css",
+            "txt",
+            "html",
+          ]}
+          projectName="My awesome project"
           onItemSelected={(item) => {
             if (item.type === "file") {
               setValue(getFileContents(item.id));
@@ -46,7 +55,9 @@ function App() {
       <div className="flex flex-col h-full w-1/2">
         <TabsList
           onTabClick={(id: string) => setValue(getFileContents(id))}
-          onTabClose={() => setValue(getFileContents())}
+          onTabClose={() => {
+            setValue(getFileContents(getSelectedFile()))
+          }}
         />
         <Breadcrumbs
           onBreadcrumbFileClick={(id: string) => setValue(getFileContents(id))}

src/App.tsx

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Some logos, like js, css, ts are provided by default */
+
 /* Vite Logo */
 .vite-logo {
   background-image: url("../public/vite.svg");
@@ -10,4 +12,12 @@
 /* HTML Logo */
 .html-logo {
   background-image: url("./assets/html.svg");
+}
+
+.json-logo {
+  background-image: url("./assets/json.svg");
+}
+
+.txt-logo {
+  background-image: url("./assets/txt.svg");
 }