chore: style to folders

kaplayjs · Nov 2, 2024 · b1b832d · b1b832d
1 parent dba32b3
commit b1b832d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/components/FileTree/FileEntry.tsx b/src/components/FileTree/FileEntry.tsx
@@ -11,7 +11,7 @@ type Props = {
     file: File;
 };
 
-const logoByKind: Record<FileKind, string> = {
+export const logoByKind: Record<FileKind, string> = {
     kaplay: assets.dino.outlined,
     scene: assets.art.outlined,
     main: assets.play.outlined,
@@ -125,6 +125,11 @@ export const FileEntry: FC<Props> = ({ file }) => {
             onClick={handleClick}
             data-file-kind={file.kind}
         >
+            <img
+                src={logoByKind[file.kind]}
+                alt={file.kind}
+                className="w-4 h-4 ml-auto object-scale-down"
+            />
             <span className="text-left truncate w-[50%] flex-1">
                 {removeExtension(file.name)}
             </span>
@@ -144,11 +149,6 @@ export const FileEntry: FC<Props> = ({ file }) => {
                     rotate={90}
                 />
             </div>
-            <img
-                src={logoByKind[file.kind]}
-                alt={file.kind}
-                className="w-4 h-4 ml-auto object-scale-down"
-            />
         </div>
     );
 };
diff --git a/src/components/FileTree/FileFold.tsx b/src/components/FileTree/FileFold.tsx
@@ -5,7 +5,7 @@ import { FileToolbar } from "./FileToolbar";
 import "./FileFolder.css";
 import { useProject } from "../../hooks/useProject";
 import type { FileFolder, FileKind } from "../../stores/storage/files";
-import { FileEntry } from "./FileEntry";
+import { FileEntry, logoByKind } from "./FileEntry";
 
 type Props = PropsWithChildren<{
     level: 0 | 1 | 2;
@@ -33,9 +33,15 @@ export const FileFold: FC<Props> = (props) => {
 
     return (
         <div className="mb-2">
-            <div className="flex justify-between">
-                {props.title && (
-                    <h2 className="text-lg font-medium">{props.title}</h2>
+            <div className="flex justify-between items-center">
+                {props.title && props.kind && (
+                    <div className="flex items-center justify-center gap-4">
+                        <img
+                            src={logoByKind[props.kind]}
+                            className="w-4"
+                        />
+                        <h2 className="text-lg font-medium">{props.title}</h2>
+                    </div>
                 )}
 
                 {(props.toolbar && props.kind) && (