change icon

l1xnan · Oct 16, 2023 · 0b731d1 · 0b731d1
1 parent a6a182d
commit 0b731d1
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 6 deletions.
diff --git a/src/Home.tsx b/src/Home.tsx
@@ -7,12 +7,12 @@ import Dataset from "@/components/Dataset";
 import FileTreeView, { FileNode } from "@/components/FileTree";
 import { Content, Layout, Sidebar } from "@/components/Layout";
 import ToggleColorMode from "@/components/ToggleColorMode";
-import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import { isDarkTheme } from "@/utils";
 import { useLocalStorageState } from "ahooks";
 import { useEffect, useState } from "react";
 import { useStore } from "@/stores/store";
+import { IconDatabasePlus, IconFolderPlus } from "@tabler/icons-react";
 
 function Home() {
   const theme = useTheme();
@@ -59,8 +59,41 @@ function Home() {
                   openDirectory(res);
                 }
               }}
+              sx={{
+                "& *": {
+                  fontSize: 16,
+                  height: 16,
+                  width: 16,
+                },
+              }}
+            >
+              <IconFolderPlus />
+            </IconButton>
+            <IconButton
+              color="inherit"
+              onClick={async () => {
+                const res = await dialog.open({
+                  directory: false,
+                  filters: [
+                    {
+                      name: "Data File",
+                      extensions: ["duckdb", "parquet", "csv"],
+                    },
+                  ],
+                });
+                if (res) {
+                  openDirectory(res.path);
+                }
+              }}
+              sx={{
+                "& *": {
+                  fontSize: 16,
+                  height: 16,
+                  width: 16,
+                },
+              }}
             >
-              <AddIcon />
+              <IconDatabasePlus />
             </IconButton>
             <IconButton
               color="inherit"
@@ -90,10 +123,10 @@ function Home() {
               : "1px solid #e2e2e2",
           }}
         >
-          {folders?.map((folder) => {
+          {folders?.map((folder, i) => {
             return (
               <FileTreeView
-                key={folder.path}
+                key={i}
                 data={folder}
                 selected={selectedPath}
                 onNodeSelect={(_, nodeId) => {

diff --git a/src/components/FileTree.tsx b/src/components/FileTree.tsx
@@ -3,7 +3,15 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Typography } from "@mui/material";
 import { TreeItem } from "@mui/x-tree-view/TreeItem";
 import { TreeView, TreeViewProps } from "@mui/x-tree-view/TreeView";
-import { IconFile, IconFolder, IconFolderOpen } from "@tabler/icons-react";
+import {
+  IconFile,
+  IconFileDatabase,
+  IconFilePower,
+  IconFileTypeCsv,
+  IconFileTypeXls,
+  IconFolder,
+  IconFolderOpen,
+} from "@tabler/icons-react";
 import * as React from "react";
 
 export interface FileNode {
@@ -17,6 +25,24 @@ export interface FileTreeProps extends TreeViewProps<undefined> {
   data: FileNode;
 }
 
+const getFileTypeIcon = (path: string) => {
+  const ext = path.split(".")[1];
+
+  if (ext == "duckdb") {
+    return <IconFileDatabase />;
+  }
+  if (ext == "csv") {
+    return <IconFileTypeCsv />;
+  }
+  if (ext == "xlsx") {
+    return <IconFileTypeXls />;
+  }
+  if (ext == "parquet") {
+    return <IconFilePower />;
+  }
+  return <IconFile />;
+};
+
 export default function FileTree({
   data,
   selected,
@@ -40,7 +66,7 @@ export default function FileTree({
       }
       icon={
         !node.is_dir ? (
-          <IconFile />
+          getFileTypeIcon(node.path)
         ) : expanded.includes(node.path) ? (
           <IconFolderOpen />
         ) : (