UPD: Refactor components

src/components/common/ConfigSection.vue

@@ -0,0 +1,60 @@
+<template>
+  <Collapsible v-model:open="collapse" :default-open="true">
+    <div class="w-full bg-zinc-900 h-12 flex">
+      <div
+        class="flex-1 flex items-center px-4"
+        :class="{'cursor-pointer hover:bg-zinc-800': showToggle}"
+        @click="toggle = !toggle">
+        <component :is="iconComponent" v-if="iconComponent" class="h-4 w-4 mr-2" />
+        <h2 class="text-sm py-4">{{ title }}</h2>
+        <Switch
+          v-if="showToggle" :checked="toggle"
+          class="ml-auto" @click.stop="toggle=!toggle" />
+      </div>
+      <CollapsibleTrigger v-if="foldable" class="flex items-center justify-center h-12 aspect-square hover:bg-zinc-800">
+        <ChevronLeft class="chevrot h-4 w-4 mt-0.5 transition-transform text-muted-foreground" />
+      </CollapsibleTrigger>
+    </div>
+    <CollapsibleContent>
+      <slot />
+    </CollapsibleContent>
+  </Collapsible>
+</template>
+<script setup>
+import { ChevronLeft } from 'lucide-vue-next'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { ref } from 'vue'
+import { Switch } from '@/components/ui/switch'
+
+const collapse = ref(true)
+
+const toggle = defineModel({
+  type: Boolean,
+  default: true,
+})
+
+defineProps({
+  title: {
+    type: String,
+    default: 'MISSING_TITLE',
+  },
+  iconComponent: {
+    type: [String, Object, Function],
+    default: undefined,
+  },
+  showToggle: {
+    type: Boolean,
+    default: false,
+  },
+  foldable: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+</script>
+<style scoped>
+[data-state=open] > .chevrot {
+  transform: rotate(-90deg);
+}
+</style>

src/components/common/HSVInput.vue

@@ -0,0 +1,307 @@
+<script setup>
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import Color from 'color'
+import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
+
+const hueSliderValue = ref(0)
+const saturationSliderValue = ref(100)
+const valueSliderValue = ref(50)
+
+const hueSliderModel = computed({
+  get() {
+    return [hueSliderValue.value]
+  },
+  set(hue) {
+    hueSliderValue.value = hue[0]
+    color.value = color.value.hue(hue[0])
+  },
+})
+
+const saturationSliderModel = computed({
+  get() {
+    return [saturationSliderValue.value]
+  },
+  set(saturation) {
+    saturationSliderValue.value = saturation[0]
+    color.value = color.value.saturationv(saturation[0])
+  },
+})
+
+const valueSliderModel = computed({
+  get() {
+    return [valueSliderValue.value]
+  },
+  set(value) {
+    valueSliderValue.value = value[0]
+    color.value = color.value.value(value[0])
+  },
+})
+
+const color = defineModel({
+  type: Color,
+  default: () => Color.rgb(255, 0, 0),
+})
+
+const saturationSliderColor = computed(() => {
+  return Color.hsv(hueSliderModel.value[0], 100, valueSliderModel.value[0])
+})
+
+const valueSliderColor = computed(() => {
+  return Color.hsv(hueSliderModel.value[0], saturationSliderModel.value[0], 100)
+})
+
+const hexInput = ref('FF0000')
+const hueInput = ref('000')
+const saturationInput = ref('100')
+const valueInput = ref('050')
+const rInput = ref('255')
+const gInput = ref('000')
+const bInput = ref('000')
+
+function onSubmitHexInput() {
+  let input = hexInput.value
+  if (input[0] !== '#') {
+    input = '#' + input
+  }
+  if (input.match(/^#[0-9A-F]{6}$/i)) {
+    color.value = Color(input)
+  } else
+    shake()
+}
+
+function onSubmitHueInput() {
+  const input = parseInt(hueInput.value)
+  if (isNaN(input)) {
+    shake()
+    return
+  }
+  const newHue = Math.max(0, Math.min(input, 360))
+  if (newHue === color.value.hue()) {
+    updateInputs()
+  }
+  color.value = color.value.hue(newHue)
+}
+
+function onSubmitSaturationInput() {
+  const input = parseInt(saturationInput.value)
+  if (isNaN(input)) {
+    shake()
+    return
+  }
+  const newSaturation = Math.max(0, Math.min(input, 100))
+  if (newSaturation === color.value.saturationv()) {
+    updateInputs()
+  }
+  color.value = color.value.saturationv(newSaturation)
+}
+
+function onSubmitValueInput() {
+  const input = parseInt(valueInput.value)
+  if (isNaN(input)) {
+    shake()
+    return
+  }
+  const newValue = Math.max(0, Math.min(input, 100))
+  if (newValue === color.value.value()) {
+    updateInputs()
+  }
+  color.value = color.value.value(newValue)
+}
+
+function onSubmitRGBInput() {
+  const r = parseInt(rInput.value)
+  const g = parseInt(gInput.value)
+  const b = parseInt(bInput.value)
+  if (isNaN(r) || isNaN(g) || isNaN(b)) {
+    shake()
+    return
+  }
+  const newColor = Color.rgb(r, g, b)
+  if (newColor.hex() === color.value.hex()) {
+    updateInputs()
+  }
+  color.value = newColor
+}
+
+function updateInputs() {
+  hexInput.value = color.value.hex().substring(1, 7)
+  hueInput.value = String(parseInt(color.value.hue())).padStart(3, '0')
+  saturationInput.value = String(parseInt(color.value.saturationv())).padStart(3, '0')
+  valueInput.value = String(parseInt(color.value.value())).padStart(3, '0')
+  rInput.value = String(parseInt(color.value.red())).padStart(3, '0')
+  gInput.value = String(parseInt(color.value.green())).padStart(3, '0')
+  bInput.value = String(parseInt(color.value.blue())).padStart(3, '0')
+  hueSliderValue.value = color.value.hue()
+  saturationSliderValue.value = color.value.saturationv()
+  valueSliderValue.value = color.value.value()
+}
+
+watch(color, updateInputs)
+onBeforeMount(updateInputs)
+
+const colorFieldText = ref(null)
+
+function shake() {
+  colorFieldText.value.classList.remove('shake')
+  setTimeout(() => {
+    colorFieldText.value.classList.add('shake')
+  }, 5)
+}
+
+</script>
+<template>
+  <div>
+    <div
+      class="w-full flex p-4 font-heading"
+      :style="{backgroundColor: `hsl(${color.hue()},${color.saturationl()}%,${color.lightness()}%)`}">
+      <div
+        ref="colorFieldText" class="w-full flex opacity-70"
+        :class="color.lighten(0.37).isLight() ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
+        style="transition: color 0.2s ease-in-out">
+        <div>
+          <form @submit.prevent="onSubmitHueInput">
+            <label for="hueInput">H: </label><input
+            id="hueInput"
+            v-model="hueInput"
+            onfocus="this.select()"
+            type="number" maxlength="3"
+            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+            @blur="updateInputs">
+          </form>
+          <form @submit.prevent="onSubmitSaturationInput">
+            <label for="saturationInput">S: </label><input
+            id="saturationInput"
+            v-model="saturationInput"
+            onfocus="this.select()"
+            type="number" maxlength="3"
+            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+            @blur="updateInputs">
+          </form>
+          <form @submit.prevent="onSubmitValueInput">
+            <label for="valueInput">V: </label><input
+            id="valueInput"
+            v-model="valueInput"
+            onfocus="this.select()"
+            type="number" maxlength="3"
+            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+            @blur="updateInputs">
+          </form>
+        </div>
+        <div class="mx-auto">
+          <form @submit.prevent="onSubmitHexInput">
+            <label for="hexInput">#</label><input
+            id="hexInput"
+            v-model="hexInput" maxlength="6"
+            onfocus="this.select()"
+            class="w-16 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+            @blur="updateInputs">
+          </form>
+        </div>
+        <div>
+          <form @submit.prevent="onSubmitRGBInput">
+            <label for="rInput">R: </label><input
+            id="rInput"
+            v-model="rInput"
+            onfocus="this.select()"
+            type="number" maxlength="3"
+            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+            @blur="updateInputs">
+          </form>
+          <form @submit.prevent="onSubmitRGBInput">
+            <label for="gInput">G: </label><input
+            id="gInput"
+            v-model="gInput"
+            onfocus="this.select()"
+            type="number" maxlength="3"
+            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+            @blur="updateInputs">
+          </form>
+          <form @submit.prevent="onSubmitRGBInput">
+            <label for="bInput">B: </label><input
+            id="bInput"
+            v-model="bInput"
+            onfocus="this.select()"
+            type="number" maxlength="3"
+            class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+            @blur="updateInputs">
+          </form>
+        </div>
+      </div>
+    </div>
+    <div
+      class="px-6"
+      :style="{background: `linear-gradient(180deg, hsla(${color.hue()}, ${color.saturationl()}%, ${color.lightness()}%, 30%) 0%, transparent 30%`}">
+      <div class="flex pt-4">
+        <p class="font-heading text-muted-foreground w-24">HUE</p>
+        <SliderRoot
+          v-model="hueSliderModel" :max="359"
+          class="relative flex w-full touch-none select-none items-center h-10">
+          <SliderTrack
+            class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
+            style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" />
+          <SliderThumb
+            class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+        </SliderRoot>
+      </div>
+      <div class="flex pt-4">
+        <p class="font-heading text-muted-foreground w-24">SAT</p>
+        <SliderRoot
+          v-model="saturationSliderModel" :max="100"
+          class="relative flex w-full touch-none select-none items-center h-10">
+          <SliderTrack
+            class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
+            :style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
+          <SliderThumb
+            class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+        </SliderRoot>
+      </div>
+      <div class="flex pt-4">
+        <p class="font-heading text-muted-foreground w-24">VAL</p>
+        <SliderRoot
+          v-model="valueSliderModel" :max="100"
+          class="relative flex w-full touch-none select-none items-center h-10">
+          <SliderTrack
+            class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
+            :style="{background: `linear-gradient(90deg, black, hsl(${valueSliderColor.hue()}, ${valueSliderColor.saturationl()}%, ${valueSliderColor.lightness()}%) 100%`}" />
+          <SliderThumb
+            class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+        </SliderRoot>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.shake {
+  animation-name: shake;
+  animation-fill-mode: forwards;
+  animation-duration: 250ms;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  15% {
+    transform: translateX(0.1rem);
+  }
+  30% {
+    transform: translateX(-0.1rem);
+  }
+  45% {
+    transform: translateX(0.1rem);
+  }
+  60% {
+    transform: translateX(-0.1rem);
+  }
+  75% {
+    transform: translateX(0.1rem);
+  }
+  90% {
+    transform: translateX(-0.1rem);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>

src/components/common/PaletteInput.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex font-heading">
+    <button
+      v-for="(option, key) in options" :key="key"
+      class="flex-1 pt-2 items-center text-center"
+      :class="currentOption!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
+      @click="currentOption = key">
+      {{ $t(option.titleKey) }}
+      <span class="flex h-4 w-full mt-2" :style="{background: option.color.hex()}" />
+    </button>
+  </div>
+  <HSVInput v-model="options[currentOption].color" class="relative z-20" />
+</template>
+<script setup>
+import HSVInput from '@/components/common/HSVInput.vue'
+import Color from 'color'
+import { onBeforeMount, reactive, ref } from 'vue'
+
+const currentOption = ref(null)
+
+const model = defineModel({
+  type: Object,
+  default: () => ({
+    one: {
+      titleKey: 'One',
+      color: Color('#ff0000'),
+    },
+    two: {
+      titleKey: 'Two',
+      color: Color('#00ff00'),
+    },
+    three: {
+      titleKey: 'Three',
+      color: Color('#0000ff'),
+    },
+  }),
+})
+
+const options = reactive(model.value)
+
+onBeforeMount(() => {
+  if (currentOption.value === null)
+    currentOption.value = Object.keys(options)[0]
+})
+
+</script>

src/components/common/ScrambleText.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import click from '@/assets/sounds/click.mp3'
+
+function playClick() {
+  const audio = new Audio(click)
+  audio.volume = 0.01 * (1 + Math.random() * 0.75 - 0.375)
+  audio.play()
+}
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+  characterSet: {
+    type: String,
+    default: 'x01_-/',
+  },
+  scrambleOnHover: {
+    type: Boolean,
+    default: false,
+  },
+  fillInterval: {
+    type: Number,
+    default: 0,
+  },
+  scrambleAmount: {
+    type: Number,
+    default: 1,
+  },
+  replaceInterval: {
+    type: Number,
+    default: 15,
+  },
+  scrambleOnMount: {
+    type: Boolean,
+    default: false,
+  },
+  resize: {
+    type: Boolean,
+    default: true,
+  },
+  delay: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const content = ref('')
+
+function randomCharacter(characterSet = props.characterSet) {
+  return props.characterSet.charAt(Math.floor(Math.random() * characterSet.length))
+}
+
+function replaceContent(text = props.text, replaceInterval = props.replaceInterval, steps = 0) {
+  if (steps > text.length + 16) {
+    content.value = text
+  }
+  if (content.value !== text) {
+    // get all the indices of characters that don't match text
+    const indices = []
+    for (let i = 0; i < text.length; i++) {
+      if (content.value.charAt(i) !== text.charAt(i)) {
+        indices.push(i)
+      }
+    }
+    if (indices.length > 0) {
+      const index = indices[Math.floor(Math.random() * indices.length)]
+      content.value = content.value.substring(0, index) + text.charAt(index) + content.value.substring(index + 1)
+    } else if (content.value.length < text.length) {
+      content.value += text.charAt(content.value.length)
+    } else {
+      content.value = content.value.substring(0, content.value.length - 1)
+    }
+    //playClick()
+    setTimeout(() => {
+      replaceContent(text, replaceInterval, steps + 1)
+    }, replaceInterval * (1 + Math.random()))
+  }
+}
+
+function scramble(scrambleAmount = props.scrambleAmount, replaceInterval = props.replaceInterval, fillInterval = props.fillInterval, characterSet = props.characterSet, text = props.text, fillText = props.text) {
+  content.value = ''
+  const spec = props.resize && (Math.random() > 0.99)
+  let i = 0
+  const specChars = atob('S09TUk8tRUFTVEVSRUdH')
+  const fillContent = function() {
+    if (content.value.length < text.length) {
+      const char = fillText.charAt(content.value.length) || ''
+      if (spec) {
+        content.value += specChars[i]
+        i = (i + 1) % specChars.length
+      } else {
+        if (char === ' ' || Math.random() > scrambleAmount) {
+          content.value += char
+        } else {
+          content.value += randomCharacter(characterSet)
+        }
+      }
+      if (fillInterval > 0) {
+        //playClick()
+        setTimeout(fillContent, fillInterval)
+      } else fillContent()
+    } else {
+      setTimeout(() => {
+        replaceContent(text, replaceInterval, 0)
+      }, spec * 500)
+    }
+  }
+  fillContent()
+}
+
+defineExpose({ scramble })
+
+onMounted(() => {
+  if (props.scrambleOnMount) {
+    setTimeout(() => {
+      scramble()
+    }, props.delay)
+  } else {
+    content.value = props.text
+  }
+})
+
+watch(() => props.text, () => {
+  replaceContent()
+})
+</script>
+
+<template>
+  <span @mouseenter="scrambleOnHover && scramble">{{ content }}</span>
+
+</template>

src/components/common/SteppedSlider.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flex flex-col px-8 my-4">
+    <span class="text-sm text-muted-foreground font-mono">{{ label }}</span>
+    <Slider
+      ref="steppedSlider" v-model="sliderModelValue" :max="max" :step="1"
+      class="pt-4" />
+    <div class="flex justify-between py-2">
+      <button
+        v-for="(position, index) in positions" :key="position"
+        class="min-w-0 text-nowrap group"
+        :class="{
+          'slider-start mr-4': index===0,
+          'slider-center': index > 0 && index < positions.length-1,
+          'slider-end ml-4': index === positions.length-1}"
+        @click="value = position.value">
+        <span
+          v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
+          :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
+        <span
+          v-if="position.label" class="text-xs font-mono uppercase mx-1 transition-colors"
+          :class="value===position.value ? 'text-zinc-100' : 'text-zinc-600 group-hover:text-zinc-500'">{{ position.label }}</span>
+        <span
+          v-if="!position.label || index === positions.length-1"
+          class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
+          :class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
+      </button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { Slider } from '@/components/ui/slider'
+import { computed } from 'vue'
+
+const value = defineModel({
+  type: Number,
+  default: 0,
+})
+
+const sliderModelValue = computed({
+  get: () => [value.value],
+  set: (val) => {
+    value.value = val[0]
+  },
+})
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: null,
+  },
+  max: {
+    type: Number,
+    default: 4,
+  },
+  namedPositions: {
+    type: Array,
+    default: () => [
+      {
+        label: 'Min',
+        value: 0,
+      },
+      {
+        value: 2,
+      },
+      {
+        label: 'Max',
+        value: 4,
+      },
+    ],
+  },
+  autoMarkers: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const positions = computed(() => {
+  if (props.autoMarkers) {
+    const filled = []
+    for (let i = 0; i <= props.max; i++) {
+      const position = props.namedPositions.find((p) => p.value === i) || { value: i }
+      filled.push(position)
+    }
+    return filled
+  }
+  return props.namedPositions
+})
+</script>
+<style scoped>
+.slider-start {
+  text-align: left;
+}
+
+.slider-center {
+  text-align: center;
+}
+
+.slider-end {
+  text-align: right;
+}
+
+.slider-start,
+.slider-end {
+  flex: 0.5;
+}
+
+.slider-center {
+  flex: 1;
+}
+</style>

src/components/common/TabSelect.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="relative">
+    <div
+      :style="backgroundStyle"
+      :class="{'hidden': !showBackground}"
+      class="absolute bg-zinc-300 outline outline-zinc-100 rounded-xl transition-all duration-75 ease-out" />
+    <div class="flex font-heading px-4 py-2 gap-2 relative">
+      <TabSelectButton
+        v-for="(option, key) in options" :key="key"
+        :ref="(el) => buttons[key] = el"
+        :title="$t(option.titleKey)"
+        :icon="option.icon" :selected="model===key"
+        @select="model=key">
+        <template v-if="$slots[key]" #replace>
+          <slot :name="key" />
+        </template>
+      </TabSelectButton>
+    </div>
+  </div>
+</template>
+<script setup>
+import { CircleDot } from 'lucide-vue-next'
+import TabSelectButton from '@/components/common/TabSelectButton.vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const model = defineModel({
+  type: String,
+  default: 'a',
+})
+
+const buttons = ref({})
+
+const showBackground = ref(false)
+
+const backgroundStyle = ref({
+  top: '0',
+  left: '0',
+  width: '0',
+  height: '0',
+})
+
+const updateBackgroundStyle = () => {
+  const selected = buttons.value[model.value]
+  if (selected) {
+    backgroundStyle.value = {
+      top: `${selected.$el.offsetTop}px`,
+      left: `${selected.$el.offsetLeft}px`,
+      width: `${selected.$el.offsetWidth}px`,
+      height: `${selected.$el.offsetHeight}px`,
+    }
+  }
+}
+
+watch([model, buttons], () => {
+  updateBackgroundStyle()
+  showBackground.value = true
+})
+
+let observer = null
+
+onMounted(() => {
+  observer = new ResizeObserver(updateBackgroundStyle)
+  observer.observe(buttons.value[model.value].$el)
+})
+
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
+
+defineProps({
+  options: {
+    type: Object,
+    default: () => ({
+      a: { titleKey: 'Option A', icon: CircleDot },
+      b: { titleKey: 'Option B', icon: CircleDot },
+      c: { titleKey: 'Option C', icon: CircleDot },
+    }),
+  },
+})
+</script>

src/components/common/TabSelectButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <button
+    class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-all"
+    :class="{'text-black bg-zinc-300 outline outline-zinc-100 hover:bg-zinc-200': selected,
+    'hover:bg-zinc-800 text-muted-foreground' : !selected}"
+    @click="$emit('select'); $refs.title.scramble()">
+    <slot v-if="$slots['replace']" name="replace" />
+    <template v-else>
+      <img
+        draggable="false"
+        :src="icon" alt="connection-type-icon"
+        class="h-16"
+        :class="{'invert': selected}">
+      <ScrambleText ref="title" :resize="false" class="text-xs text-wrap" :text="title" />
+    </template>
+  </button>
+</template>
+<script setup>
+import ScrambleText from '@/components/common/ScrambleText.vue'
+
+defineEmits(['select'])
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: [String, Object, Function],
+    default: '',
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>