PricingTable 价格表

<script setup lang="ts">
import { ref } from "vue";
import { PricingTable, type PricingTableTier, type PricingTableSection } from "@reglow/reui";

const tiers = ref<PricingTableTier[]>([
  {
    id: "free",
    title: "Free",
    price: "$0",
    billingCycle: "/月",
    button: { label: "免费开始", variant: "outline" },
  },
  {
    id: "pro",
    title: "Pro",
    price: "$19",
    billingCycle: "/月",
    badge: "推荐",
    highlight: true,
    button: { label: "升级 Pro" },
  },
]);

const sections = ref<PricingTableSection[]>([
  {
    title: "基础功能",
    features: [
      { title: "项目数", tiers: { free: "3", pro: "无限" } },
      { title: "API 访问", tiers: { free: false, pro: true } },
    ],
  },
]);
</script>

<template>
  <PricingTable :tiers="tiers" :sections="sections" />
</template>

import {
  PricingTable,
  type PricingTableTier,
  type PricingTableSection,
  type PricingTableSectionFeature,
  type PricingTableProps,
} from "@reglow/reui";