JSON Rich Text Editor

• item 1
• item 2
  • item 2.1
  • item 2.2
    • item 2.2.1
    • item 2.2.2
• item 3
  1. item 3.1
  2. item 3.2
  3. item 3.3
• item 4

1. item 1
2. item 2
3. item 3
   1. item 3.1
   2. item 3.2
      1. item 3.2.1
4. item 4
   1. item 4.1
   2. item 4.2
      1. item 4.2.1
      2. item 4.2.2

<script setup>
import { computed } from "vue";
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})
const isExternal = computed(() => props.data.link?.href?.startsWith('http'));
const hasLink = computed(() => !!props.data.link?.href);
const wrapperComponent = computed(() => {
  if (!hasLink.value) return 'div';
  return isExternal.value ? 'a' : 'router-link';
});
const wrapperProps = computed(() => {
  if (!hasLink.value) return {};
  if (isExternal.value) {
    return {
      href: props.data.link.href,
      title: props.data.link.title
    };
  }
  return {
    to: props.data.link.href,
    title: props.data.link.title
  };
});
</script>
<template>
  <div class="relative bg-neutral-700 z-20">
    <component
        :is="wrapperComponent"
        v-bind="wrapperProps"
        :data-analytics-type="hasLink ? 'Click' : undefined"
        :data-analytics-label="hasLink ? 'Promo bar' : undefined"
        class="block py-[15px] px-6 lg:py-2"
    >
      <div class="flex flex-col gap-[9px] justify-center items-center lg:flex-row font-inter text-xs leading-5">
        <span v-if="data.badge_text || data.badge_icon?.url" class="inline-flex items-center gap-1 rounded-md bg-green-base px-2 py-1 leading-4 font-normal text-green-darker align-middle">
          <img
              v-if="data.badge_icon?.url"
              :src="data.badge_icon.url + '?auto=webp&width=32'"
              :alt="data.badge_icon.title || 'badge icon'"
              class="w-4 h-4 object-contain"
              width="16"
              height="16"
          />
          <span v-if="data.badge_text">{{ data.badge_text }}</span>
        </span>
        <p class="text-green-base text-center lg:text-left">
          <span class="font-normal" v-if="data.text">{{ data.text }}</span>
          <span class="ml-1 underline font-semibold" v-if="data.link?.title">{{ data.link.title }}</span>
        </p>
      </div>
    </component>
  </div>
</template>