Basic scroll area

<!-- ПОРТ (registry-reui/bases/radix/components/scrollspy/c-scrollspy-2.tsx). -->
<script setup lang="ts">
import { ref } from "vue"
import { Scrollspy } from "@/components/reui/scrollspy"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"

const parentRef = ref<HTMLDivElement | null>(null)

const nav = [
  {
    id: "section-6",
    label: "Section 1",
  },
  {
    id: "section-7",
    label: "Section 2",
  },
  {
    id: "section-8",
    label: "Section 3",
  },
  {
    id: "section-9",
    label: "Section 4",
  },
  {
    id: "section-10",
    label: "Section 5",
  },
]
</script>

<template>
  <div class="w-full space-y-5">
    <div class="flex w-full gap-2">
      <Scrollspy :offset="50" :target="parentRef" class="flex gap-2.5">
        <Button
          v-for="item in nav"
          :key="item.id"
          variant="outline"
          :data-scrollspy-anchor="item.id"
          class="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
        >
          {{ item.label }}
        </Button>
      </Scrollspy>
    </div>
    <div class="w-full" ref="parentRef">
      <ScrollArea class="h-[400px] grow">
        <div class="space-y-8">
          <div
            v-for="item in nav"
            :key="item.id"
            :id="item.id"
            class="space-y-2.5"
          >
            <h3 class="text-foreground text-base">{{ item.label }}</h3>
            <div class="bg-muted rounded-2xl h-[350px]"></div>
          </div>
        </div>
      </ScrollArea>
    </div>
  </div>
</template>