From dc8e767d0fdcedcc0fa8e4a4b1074199d3f052db Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Thu, 27 Jun 2024 06:34:00 +0000
Subject: [PATCH] add language icons

---
 public/c.svg                      |  1 +
 public/python.svg                 |  1 +
 src/components/SelectLanguage.vue | 25 +++++++++++++++++++++----
 3 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 public/c.svg
 create mode 100644 public/python.svg

diff --git a/public/c.svg b/public/c.svg
new file mode 100644
index 0000000..0f99f82
--- /dev/null
+++ b/public/c.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="0.89em" height="1em" viewBox="0 0 256 288"><path fill="#a9b9cb" d="M255.987 85.672c-.002-4.843-1.037-9.122-3.129-12.794c-2.055-3.612-5.134-6.638-9.262-9.032c-34.081-19.67-68.195-39.28-102.264-58.97c-9.185-5.307-18.091-5.114-27.208.27c-13.565 8.008-81.481 46.956-101.719 58.689C4.071 68.665.015 76.056.013 85.663C0 125.221.013 164.777 0 204.336c.002 4.736.993 8.932 2.993 12.55c2.056 3.72 5.177 6.83 9.401 9.278c20.239 11.733 88.164 50.678 101.726 58.688c9.121 5.387 18.027 5.579 27.215.27c34.07-19.691 68.186-39.3 102.272-58.97c4.224-2.447 7.345-5.559 9.401-9.276c1.997-3.618 2.99-7.814 2.992-12.551c0 0 0-79.094-.013-118.653"/><path fill="#7f8b99" d="M141.101 5.134c-9.17-5.294-18.061-5.101-27.163.269C100.395 13.39 32.59 52.237 12.385 63.94C4.064 68.757.015 76.129.013 85.711C0 125.166.013 164.62 0 204.076c.002 4.724.991 8.909 2.988 12.517c2.053 3.711 5.169 6.813 9.386 9.254a9009 9009 0 0 0 20.159 11.62L219.625 50.375c-26.178-15.074-52.363-30.136-78.524-45.241"/><path fill="#fff" d="m154.456 126.968l39.839.281c0-16.599-16.802-57.249-64.973-57.249c-30.691 0-71.951 19.512-71.951 75.61S97.818 220 129.322 220c51.017 0 63.21-35.302 63.21-55.252l-38.007-2.173s1.017 23.075-25.406 23.075c-24.39 0-28.46-29.878-28.46-40.04c0-15.447 5.493-40.244 28.46-40.244c22.968 0 25.337 21.602 25.337 21.602"/></svg>
\ No newline at end of file
diff --git a/public/python.svg b/public/python.svg
new file mode 100644
index 0000000..f2a4fbe
--- /dev/null
+++ b/public/python.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.01em" height="1em" viewBox="0 0 256 255"><defs><linearGradient id="logosPython0" x1="12.959%" x2="79.639%" y1="12.039%" y2="78.201%"><stop offset="0%" stop-color="#387eb8"/><stop offset="100%" stop-color="#366994"/></linearGradient><linearGradient id="logosPython1" x1="19.128%" x2="90.742%" y1="20.579%" y2="88.429%"><stop offset="0%" stop-color="#ffe052"/><stop offset="100%" stop-color="#ffc331"/></linearGradient></defs><path fill="url(#logosPython0)" d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072M92.802 19.66a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.13"/><path fill="url(#logosPython1)" d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897m34.114-19.586a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.131a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13"/></svg>
\ No newline at end of file
diff --git a/src/components/SelectLanguage.vue b/src/components/SelectLanguage.vue
index b0b8d61..4f28e50 100644
--- a/src/components/SelectLanguage.vue
+++ b/src/components/SelectLanguage.vue
@@ -1,11 +1,28 @@
 <script lang="ts" setup>
 import { code } from "../composables/code"
 import type { SelectOption } from "naive-ui"
+import { h } from "vue"
 
-const languages: SelectOption[] = [
-  { value: "python", label: "Python" },
-  { value: "c", label: "C" },
+const LANGS = [
+  ["python", "Python"],
+  ["c", "C 语言"],
 ]
+
+const languages: SelectOption[] = LANGS.map((it) => ({
+  value: it[0],
+  label: () => [
+    h("img", {
+      src: `/${it[0]}.svg`,
+      style: {
+        width: "16px",
+        height: "16px",
+        marginRight: "8px",
+        transform: "translateY(3px)",
+      },
+    }),
+    it[1],
+  ],
+}))
 </script>
 <template>
   <n-select
@@ -17,6 +34,6 @@ const languages: SelectOption[] = [
 </template>
 <style scoped>
 .select {
-  width: 100px;
+  width: 120px;
 }
 </style>