Scroll area with both scrollbars

<!-- ПОРТ (registry-reui/bases/radix/components/scroll-area/c-scroll-area-3.tsx). -->
<script setup lang="ts">
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

const products = [
  {
    name: "Starter",
    price: "$9/mo",
    storage: "10GB",
    users: "1",
    support: "Email",
    api: "Limited",
    backups: "Weekly",
    analytics: "Basic",
  },
  {
    name: "Professional",
    price: "$29/mo",
    storage: "100GB",
    users: "5",
    support: "Priority",
    api: "Standard",
    backups: "Daily",
    analytics: "Advanced",
  },
  {
    name: "Business",
    price: "$99/mo",
    storage: "500GB",
    users: "20",
    support: "24/7",
    api: "Full",
    backups: "Real-time",
    analytics: "Premium",
  },
  {
    name: "Enterprise",
    price: "$299/mo",
    storage: "2TB",
    users: "Unlimited",
    support: "Dedicated",
    api: "Custom",
    backups: "Continuous",
    analytics: "Enterprise",
  },
  {
    name: "Basic",
    price: "$5/mo",
    storage: "5GB",
    users: "1",
    support: "Community",
    api: "None",
    backups: "Monthly",
    analytics: "None",
  },
  {
    name: "Team",
    price: "$49/mo",
    storage: "250GB",
    users: "10",
    support: "Business Hours",
    api: "Standard",
    backups: "Daily",
    analytics: "Standard",
  },
  {
    name: "Premium",
    price: "$149/mo",
    storage: "1TB",
    users: "50",
    support: "24/7",
    api: "Full",
    backups: "Real-time",
    analytics: "Premium",
  },
  {
    name: "Ultimate",
    price: "$499/mo",
    storage: "5TB",
    users: "Unlimited",
    support: "Dedicated",
    api: "Custom",
    backups: "Continuous",
    analytics: "Enterprise",
  },
]

const features = [
  { label: "Storage", key: "storage" },
  { label: "Users", key: "users" },
  { label: "Support", key: "support" },
  { label: "API Access", key: "api" },
  { label: "Backups", key: "backups" },
  { label: "Analytics", key: "analytics" },
] as const
</script>

<template>
  <ScrollArea class="rounded-2xl h-76 max-w-96 border">
    <div class="min-w-[600px]">
      <table class="w-full">
        <thead>
          <tr class="bg-muted/50 border-b">
            <th class="p-3 text-left text-sm font-medium">Plan</th>
            <th class="min-w-36 p-3 text-right text-sm font-medium">
              Price
            </th>
            <th
              v-for="feature in features"
              :key="feature.key"
              class="min-w-36 p-3 text-center text-sm font-medium"
            >
              {{ feature.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(product, i) in products"
            :key="i"
            class="hover:bg-muted/30 border-b last:border-0"
          >
            <td class="p-3 text-sm font-medium">{{ product.name }}</td>
            <td class="p-3 text-right text-sm">{{ product.price }}</td>
            <td
              v-for="feature in features"
              :key="feature.key"
              class="p-3 text-center text-sm"
            >
              {{ product[feature.key] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <ScrollBar orientation="horizontal" />
  </ScrollArea>
</template>