feat: add file icons beside file names (#110)

Author: ydcjeff

package.json

@@ -13,17 +13,18 @@
     "lint": "prettier --check . && pnpm run black:lint && pnpm run isort:lint"
   },
   "devDependencies": {
-    "jszip": "^3.6.0",
-    "file-saver": "^2.0.5",
-    "prismjs": "^1.23.0",
-    "vue": "^3.0.11",
+    "@iconify/iconify": "^2.0.0",
     "@types/file-saver": "^2.0.2",
     "@types/prismjs": "^1.16.5",
     "@vitejs/plugin-vue": "^1.2.2",
     "@vue/compiler-sfc": "^3.0.11",
     "conventional-changelog-cli": "^2.1.1",
+    "file-saver": "^2.0.5",
+    "jszip": "^3.6.0",
     "prettier": "^2.2.1",
-    "vite": "^2.2.3"
+    "prismjs": "^1.23.0",
+    "vite": "^2.2.3",
+    "vue": "^3.0.11"
   },
   "prettier": {
     "semi": false,

pnpm-lock.yaml

@@ -7,6 +7,7 @@
       :class="{ active: currentTab === tab }"
       @click="currentTab = tab"
     >
+      <span class="iconify" :data-icon="getFileType(tab)"></span>
       {{ tab }}
     </div>
   </div>
@@ -21,20 +22,33 @@
 import CodeBlock from './CodeBlock.vue'
 import { getTemplateFileNames, store } from '../store'
 import { computed, ref } from 'vue'
+import '@iconify/iconify'
 
 export default {
   components: { CodeBlock },
   setup() {
     const currentTab = ref('README.md')
     const tabs = ref(getTemplateFileNames())
+    // search more file types mapping on
+    // https://icones.js.org/collection/vscode-icons
+    const fileTypes = {
+      py: 'python',
+      md: 'markdown',
+      json: 'json',
+      txt: 'text'
+    }
 
     const getLang = computed(() => {
       return currentTab.value.split('.')[1]
     })
+    const getFileType = (tab) => {
+      const fileType = tab.split('.')[1]
+      return `vscode-icons:file-type-${fileTypes[fileType]}`
+    }
     const formattedCode = () => {
       return store.code[currentTab.value]
     }
-    return { currentTab, tabs, getLang, formattedCode }
+    return { currentTab, tabs, getLang, getFileType, formattedCode }
   }
 }
 </script>
@@ -53,6 +67,8 @@ export default {
   padding-right: 1.5rem;
 }
 .right-pane-tab {
+  display: flex;
+  place-items: center;
   background-color: var(--c-white);
   cursor: pointer;
   color: var(--c-text);
@@ -67,6 +83,9 @@ export default {
   color: var(--c-brand-red);
   border-bottom-color: var(--c-brand-red);
 }
+.iconify {
+  margin-right: 6px;
+}
 /* media queries */
 @media (max-width: 768px) {
   .right-pane-contexts {