feat(editor): add code image (#550)

* feat(editor): add code image

* feat(ui): add Switch component

Author: antonreshetov

src/renderer/components/editor/Editor.vue

@@ -30,7 +30,8 @@ const {
   selectedSnippetIds,
   isAvailableToCodePreview,
 } = useSnippets()
-const { isShowMarkdown, isShowMindmap, isShowCodePreview } = useApp()
+const { isShowMarkdown, isShowMindmap, isShowCodePreview, isShowCodeImage }
+  = useApp()
 
 const { addToUpdateContentQueue } = useSnippetUpdate()
 
@@ -55,6 +56,7 @@ const isShowEditor = computed(() => {
   return (
     !isShowMarkdown.value
     && !isShowMindmap.value
+    && !isShowCodeImage.value
     && !isEmpty.value
     && selectedSnippetIds.value.length === 1
   )
@@ -292,6 +294,7 @@ onMounted(() => {
     <EditorMarkdown v-if="isShowMarkdown" />
     <EditorFooter v-if="isShowEditor" />
     <EditorMindmap v-if="isShowMindmap" />
+    <EditorCodeImage v-if="isShowCodeImage" />
     <div
       v-if="isEmpty || selectedSnippetIds.length > 1"
       class="row-span-full flex items-center justify-center"

src/renderer/components/editor/code-image/BackgroundSwitch.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Check } from 'lucide-vue-next'
+
+type Active = 'disco' | 'salad' | 'cucumber' | 'aqua' | 'lovely'
+
+const active = defineModel<Active>('active', {
+  required: true,
+})
+
+const gradients: { name: Active, class: string }[] = [
+  {
+    name: 'disco',
+    class: 'gradient-disco',
+  },
+  {
+    name: 'aqua',
+    class: 'gradient-aqua',
+  },
+  {
+    name: 'salad',
+    class: 'gradient-salad',
+  },
+  {
+    name: 'cucumber',
+    class: 'gradient-cucumber',
+  },
+  {
+    name: 'lovely',
+    class: 'gradient-lovely',
+  },
+]
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <div
+      v-for="gradient in gradients"
+      :key="gradient.name"
+      class="flex h-4 w-4 items-center justify-center rounded-sm"
+      :class="gradient.class"
+      @click="active = gradient.name"
+    >
+      <Check
+        v-if="active === gradient.name"
+        class="h-3 w-3 text-black"
+      />
+    </div>
+  </div>
+</template>