fix(site): add default file icon for files without specific icons (#21170)

site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx

@@ -8,8 +8,13 @@ const fileTree: FileTree = {
 	"main.tf": "resource aws_instance my_instance {}",
 	"variables.tf": "variable my_var {}",
 	"outputs.tf": "output my_output {}",
+	"README.md": "# Example\n\nThis is an example.",
+	"install.sh": "#!/bin/bash\necho 'Installing...'",
+	"config.txt": "key=value",
+	"app.py": "print('Hello')",
 	folder: {
 		"nested.tf": "resource aws_instance my_instance {}",
+		"data.csv": "col1,col2\n1,2",
 	},
 };
 

site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx

@@ -3,7 +3,12 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
 import { DockerIcon } from "components/Icons/DockerIcon";
-import { ChevronDownIcon, ChevronRightIcon, FolderIcon } from "lucide-react";
+import {
+	ChevronDownIcon,
+	ChevronRightIcon,
+	FileIcon,
+	FolderIcon,
+} from "lucide-react";
 import {
 	type CSSProperties,
 	type ElementType,
@@ -95,6 +100,9 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
 			icon = FileTypeMarkdown;
 		} else if (filename.endsWith("Dockerfile")) {
 			icon = DockerIcon;
+		} else {
+			// Default icon for files without a specific icon.
+			icon = FileIcon;
 		}
 
 		return (