feat: add file extension based icons (#369)

Author: Charan167

packages/cli/tests/__snapshots__/create-tutorial.test.ts.snap

@@ -44,6 +44,22 @@ exports[`create a project 1`] = `
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/bar/styles.css",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/unicorn.js",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/windows_xp.png",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_solution",
@@ -106,6 +122,22 @@ exports[`create and build a project > built project file references 1`] = `
   "1-basics-1-introduction-2-foo-files.json": [
     "/bar/styles.css",
     "/src/index.html",
+    "/src/test-1.js",
+    "/src/test-10.ts",
+    "/src/test-11.jsx",
+    "/src/test-12.tsx",
+    "/src/test-13.cts",
+    "/src/test-14.mts",
+    "/src/test-15.svg",
+    "/src/test-16.vue",
+    "/src/test-2.cjs",
+    "/src/test-3.mjs",
+    "/src/test-4.css",
+    "/src/test-5.md",
+    "/src/test-6.png",
+    "/src/test-7.jpg",
+    "/src/test-8.gif",
+    "/src/test-9.xyz",
     "/src/unicorn.js",
     "/src/windows_xp.png",
   ],
@@ -241,6 +273,22 @@ exports[`create and eject a project 1`] = `
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/bar/styles.css",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif",
+  "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/unicorn.js",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/windows_xp.png",
   "src/content/tutorial/1-basics/1-introduction/2-foo/_solution",

packages/react/src/core/FileTree.tsx

@@ -183,6 +183,9 @@ interface FileProps {
 }
 
 function File({ file: { depth, name }, onClick, selected }: FileProps) {
+  const extension = getFileExtension(name);
+  const fileIcon = extensionsToIcons.get(extension) || 'i-ph-file-duotone';
+
   return (
     <NodeButton
       className={classNames('group transition-theme', {
@@ -192,7 +195,7 @@ function File({ file: { depth, name }, onClick, selected }: FileProps) {
           selected,
       })}
       depth={depth}
-      iconClasses={classNames('i-ph-file-duotone', {
+      iconClasses={classNames(fileIcon, {
         'text-tk-elements-fileTree-file-iconColor group-hover:text-tk-elements-fileTree-file-iconColorHover': !selected,
         'text-tk-elements-fileTree-file-iconColorSelected': selected,
       })}
@@ -358,3 +361,42 @@ function compareString(a: string, b: string) {
 
   return 0;
 }
+
+function getFileExtension(filename: string) {
+  const parts = filename.split('.');
+
+  parts.shift();
+
+  const extension = parts.at(-1) || '';
+
+  return extension;
+}
+
+const extensionsToIcons = new Map([
+  ['ts', 'i-ph-file-ts-duotone'],
+  ['cts', 'i-ph-file-ts-duotone'],
+  ['mts', 'i-ph-file-ts-duotone'],
+
+  ['tsx', 'i-ph-file-tsx-duotone'],
+
+  ['js', 'i-ph-file-js-duotone'],
+  ['cjs', 'i-ph-file-js-duotone'],
+  ['mjs', 'i-ph-file-js-duotone'],
+
+  ['jsx', 'i-ph-file-jsx-duotone'],
+
+  ['html', 'i-ph-file-html-duotone'],
+
+  ['css', 'i-ph-file-css-duotone'],
+
+  ['md', 'i-ph-file-md-duotone'],
+
+  ['vue', 'i-ph-file-vue-duotone'],
+
+  ['gif', 'i-ph-file-image-duotone'],
+  ['jpg', 'i-ph-file-image-duotone'],
+  ['jpeg', 'i-ph-file-image-duotone'],
+  ['png', 'i-ph-file-image-duotone'],
+
+  ['svg', 'i-ph-file-svg-duotone'],
+]);