Skip to content

Commit ff39cdc

Browse files
Charan167Charan167
authored
feat: add file extension based icons (#369)
1 parent bc01566 commit ff39cdc

File tree

18 files changed

+91
-1
lines changed

18 files changed

+91
-1
lines changed

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,22 @@ exports[`create a project 1`] = `
4444
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/bar/styles.css",
4545
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src",
4646
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html",
47+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js",
48+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts",
49+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx",
50+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx",
51+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts",
52+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts",
53+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg",
54+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue",
55+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs",
56+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs",
57+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css",
58+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md",
59+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png",
60+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg",
61+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif",
62+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz",
4763
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/unicorn.js",
4864
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/windows_xp.png",
4965
"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`] = `
106122
"1-basics-1-introduction-2-foo-files.json": [
107123
"/bar/styles.css",
108124
"/src/index.html",
125+
"/src/test-1.js",
126+
"/src/test-10.ts",
127+
"/src/test-11.jsx",
128+
"/src/test-12.tsx",
129+
"/src/test-13.cts",
130+
"/src/test-14.mts",
131+
"/src/test-15.svg",
132+
"/src/test-16.vue",
133+
"/src/test-2.cjs",
134+
"/src/test-3.mjs",
135+
"/src/test-4.css",
136+
"/src/test-5.md",
137+
"/src/test-6.png",
138+
"/src/test-7.jpg",
139+
"/src/test-8.gif",
140+
"/src/test-9.xyz",
109141
"/src/unicorn.js",
110142
"/src/windows_xp.png",
111143
],
@@ -241,6 +273,22 @@ exports[`create and eject a project 1`] = `
241273
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/bar/styles.css",
242274
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src",
243275
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html",
276+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js",
277+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts",
278+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx",
279+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx",
280+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts",
281+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts",
282+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg",
283+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue",
284+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-2.cjs",
285+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-3.mjs",
286+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-4.css",
287+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-5.md",
288+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-6.png",
289+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-7.jpg",
290+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-8.gif",
291+
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-9.xyz",
244292
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/unicorn.js",
245293
"src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/windows_xp.png",
246294
"src/content/tutorial/1-basics/1-introduction/2-foo/_solution",

‎packages/react/src/core/FileTree.tsx‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,9 @@ interface FileProps {
183183
}
184184

185185
function File({ file: { depth, name }, onClick, selected }: FileProps) {
186+
const extension = getFileExtension(name);
187+
const fileIcon = extensionsToIcons.get(extension) || 'i-ph-file-duotone';
188+
186189
return (
187190
<NodeButton
188191
className={classNames('group transition-theme', {
@@ -192,7 +195,7 @@ function File({ file: { depth, name }, onClick, selected }: FileProps) {
192195
selected,
193196
})}
194197
depth={depth}
195-
iconClasses={classNames('i-ph-file-duotone', {
198+
iconClasses={classNames(fileIcon, {
196199
'text-tk-elements-fileTree-file-iconColor group-hover:text-tk-elements-fileTree-file-iconColorHover': !selected,
197200
'text-tk-elements-fileTree-file-iconColorSelected': selected,
198201
})}
@@ -358,3 +361,42 @@ function compareString(a: string, b: string) {
358361

359362
return 0;
360363
}
364+
365+
function getFileExtension(filename: string) {
366+
const parts = filename.split('.');
367+
368+
parts.shift();
369+
370+
const extension = parts.at(-1) || '';
371+
372+
return extension;
373+
}
374+
375+
const extensionsToIcons = new Map([
376+
['ts', 'i-ph-file-ts-duotone'],
377+
['cts', 'i-ph-file-ts-duotone'],
378+
['mts', 'i-ph-file-ts-duotone'],
379+
380+
['tsx', 'i-ph-file-tsx-duotone'],
381+
382+
['js', 'i-ph-file-js-duotone'],
383+
['cjs', 'i-ph-file-js-duotone'],
384+
['mjs', 'i-ph-file-js-duotone'],
385+
386+
['jsx', 'i-ph-file-jsx-duotone'],
387+
388+
['html', 'i-ph-file-html-duotone'],
389+
390+
['css', 'i-ph-file-css-duotone'],
391+
392+
['md', 'i-ph-file-md-duotone'],
393+
394+
['vue', 'i-ph-file-vue-duotone'],
395+
396+
['gif', 'i-ph-file-image-duotone'],
397+
['jpg', 'i-ph-file-image-duotone'],
398+
['jpeg', 'i-ph-file-image-duotone'],
399+
['png', 'i-ph-file-image-duotone'],
400+
401+
['svg', 'i-ph-file-svg-duotone'],
402+
]);

‎packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-1.js‎

Whitespace-only changes.

‎packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-10.ts‎

Whitespace-only changes.

‎packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-11.jsx‎

Whitespace-only changes.

‎packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-12.tsx‎

Whitespace-only changes.

‎packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-13.cts‎

Whitespace-only changes.

‎packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-14.mts‎

Whitespace-only changes.

‎packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-15.svg‎

Loading

‎packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/test-16.vue‎

Whitespace-only changes.

0 commit comments

Comments
 (0)