From 35b77c85041367d353cbe30c24ddb324abdf890c Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 11 Oct 2023 22:45:06 +0200
Subject: [PATCH] chore: add icons for versions

---
 packages/online-playground/public/logo-ts.svg |  1 +
 .../online-playground/public/logo-vue.svg     |  2 ++
 packages/online-playground/src/Header.vue     | 22 +++++++++++++------
 .../online-playground/src/VersionSelect.vue   |  6 +++--
 4 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 packages/online-playground/public/logo-ts.svg
 create mode 100644 packages/online-playground/public/logo-vue.svg

diff --git a/packages/online-playground/public/logo-ts.svg b/packages/online-playground/public/logo-ts.svg
new file mode 100644
index 00000000..b65a93a8
--- /dev/null
+++ b/packages/online-playground/public/logo-ts.svg
@@ -0,0 +1 @@
+<svg fill="none" height="128" viewBox="0 0 128 128" width="128" xmlns="http://www.w3.org/2000/svg"><rect fill="#3178c6" height="128" rx="6" width="128"/><path clip-rule="evenodd" d="m74.2622 99.468v14.026c2.2724 1.168 4.9598 2.045 8.0625 2.629 3.1027.585 6.3728.877 9.8105.877 3.3503 0 6.533-.321 9.5478-.964 3.016-.643 5.659-1.702 7.932-3.178 2.272-1.476 4.071-3.404 5.397-5.786 1.325-2.381 1.988-5.325 1.988-8.8313 0-2.5421-.379-4.7701-1.136-6.6841-.758-1.9139-1.85-3.6159-3.278-5.1062-1.427-1.4902-3.139-2.827-5.134-4.0104-1.996-1.1834-4.246-2.3011-6.752-3.353-1.8352-.7597-3.4812-1.4975-4.9378-2.2134-1.4567-.7159-2.6948-1.4464-3.7144-2.1915-1.0197-.7452-1.8063-1.5341-2.3598-2.3669-.5535-.8327-.8303-1.7751-.8303-2.827 0-.9643.2476-1.8336.7429-2.6079s1.1945-1.4391 2.0976-1.9943c.9031-.5551 2.0101-.9861 3.3211-1.2929 1.311-.3069 2.7676-.4603 4.3699-.4603 1.1658 0 2.3958.0877 3.6928.263 1.296.1753 2.6.4456 3.911.8109 1.311.3652 2.585.8254 3.824 1.3806 1.238.5552 2.381 1.198 3.43 1.9285v-13.1051c-2.127-.8182-4.45-1.4245-6.97-1.819s-5.411-.5917-8.6744-.5917c-3.3211 0-6.4674.3579-9.439 1.0738-2.9715.7159-5.5862 1.8336-7.844 3.353-2.2578 1.5195-4.0422 3.4553-5.3531 5.8075-1.311 2.3522-1.9665 5.1646-1.9665 8.4373 0 4.1785 1.2017 7.7433 3.6052 10.6945 2.4035 2.9513 6.0523 5.4496 10.9466 7.495 1.9228.7889 3.7145 1.5633 5.375 2.323 1.6606.7597 3.0954 1.5486 4.3044 2.3668s2.1628 1.7094 2.8618 2.6736c.7.9643 1.049 2.06 1.049 3.2873 0 .9062-.218 1.7462-.655 2.5202s-1.1 1.446-1.9885 2.016c-.8886.57-1.9956 1.016-3.3212 1.337-1.3255.321-2.8768.482-4.6539.482-3.0299 0-6.0305-.533-9.0021-1.6-2.9715-1.066-5.7245-2.666-8.2591-4.799zm-23.5596-34.9136h18.2974v-11.5544h-51v11.5544h18.2079v51.4456h14.4947z" fill="#fff" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/packages/online-playground/public/logo-vue.svg b/packages/online-playground/public/logo-vue.svg
new file mode 100644
index 00000000..a1d285eb
--- /dev/null
+++ b/packages/online-playground/public/logo-vue.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
diff --git a/packages/online-playground/src/Header.vue b/packages/online-playground/src/Header.vue
index ed306be5..6d60acaf 100644
--- a/packages/online-playground/src/Header.vue
+++ b/packages/online-playground/src/Header.vue
@@ -57,11 +57,11 @@ function toggleDark() {
       <span>Pinia Playground</span>
     </h1>
     <div class="links">
-      <VersionSelect
-        v-model="store.state.typescriptVersion"
-        pkg="typescript"
-        label="TypeScript"
-      />
+      <VersionSelect v-model="store.state.typescriptVersion" pkg="typescript">
+        <template #label>
+          <img src="/logo-ts.svg" alt="TypeScript" class="version-logo" />
+        </template>
+      </VersionSelect>
       <!-- <VersionSelect
         :model-value="vueVersion"
         @update:model-value="setVueVersion"
@@ -83,8 +83,11 @@ function toggleDark() {
         :model-value="store.vueVersion || 'latest'"
         @update:model-value="setVueVersion"
         pkg="vue"
-        label="Vue"
-      />
+      >
+        <template #label>
+          <img src="/logo-vue.svg" alt="Vue" class="version-logo" />
+        </template>
+      </VersionSelect>
       <button
         title="Toggle development production mode"
         class="toggle-dev"
@@ -269,4 +272,9 @@ h1 img {
 .links > * + * {
   margin-left: 4px;
 }
+
+.version-logo {
+  height: 1.2em;
+  margin-right: 4px;
+}
 </style>
diff --git a/packages/online-playground/src/VersionSelect.vue b/packages/online-playground/src/VersionSelect.vue
index 065a64fd..1c5c4524 100644
--- a/packages/online-playground/src/VersionSelect.vue
+++ b/packages/online-playground/src/VersionSelect.vue
@@ -7,7 +7,7 @@ const versions = ref<string[]>()
 const version = defineModel()
 const props = defineProps<{
   pkg: string
-  label: string
+  label?: string
 }>()
 
 async function toggle() {
@@ -79,7 +79,9 @@ onMounted(() => {
 <template>
   <div class="version" @click.stop>
     <span class="active-version" @click="toggle">
-      {{ label }}
+      <slot name="label">
+        {{ label }}
+      </slot>
       <span class="number">{{ version }}</span>
     </span>
 
-- 
2.47.3