🔥𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮𝗻 𝗻𝟴𝗻 𝗖𝗹𝗼𝗻𝗲 𝗶𝗻 𝗩𝘂𝗲

<script setup>
import { ref } from "vue"
import { VueFlow, useVueFlow } from "@vue-flow/core"
import { Background } from '@vue-flow/background'
import "@vue-flow/core/dist/style.css"

const nodes = ref([
    {
      id: '1',
      type: 'input',
      data: { label: 'Node 1' },
      position: { x: 250, y: 0 },
      class: "p-3 text-slate-50 bg-[#342c3e] rounded-md shadow-md",
    },
    {
      id: '2',
      type: 'output',
      data: { label: 'Node 2' },
      position: { x: 100, y: 100 },
      class: "p-3 text-slate-50 bg-[#342c3e] rounded-md shadow-md",
    },
    {
      id: '3',
      data: { label: 'Node 3' },
      position: { x: 400, y: 100 },
      class: "p-3 text-slate-50 bg-[#342c3e] rounded-md shadow-md",
    }
  ])

  const edges = ref([
    { id: 'e1-2', source: '1', target: '2', animated: true },

    { id: 'e1-3',source: '1',target: '3',label: 'edge with text' },
  ])

</script>

<template>
  <div class="w-[500px] h-[500px] mx-auto">
    <div class="w-[500px] h-[500px] rounded-2xl overflow-hidden">

                        <!-- Flow Canvas -->
      <VueFlow class="basic-flow dark" :nodes="nodes" :edges="edges">

        <Background pattern-color="#7e7e7e" :gap="16" />

      </VueFlow>

    </div>
  </div>
</template>