<template>
  <UPageCard class="divide-y overflow-hidden rounded-xl [&:not(:first-child)]:mt-4  dark:divide-gray-700 shadow-sm ">
      <div
        v-for="(slot, i) in slotItems"
        :key="i"
        class=""
      >
        <component :is="slot" />
      </div>

  </UPageCard>
</template>

<script setup lang="ts">
const slots = useSlots()

// Process slots to create stack items
const slotItems = computed(() => {
  const defaultSlots = slots.default?.() || []
  return defaultSlots.filter(slot => slot)
})

defineSlots()
</script>
