Pricing Table

interface ProductItem {
  primaryText: string;
  secondaryText?: string;
}

interface Product {
  id: string, // An ID you'll pass into a <PricingCard> to render it.
  name: string, // The name of the product (e.g., Pro).
  description?: string, // Product description.
  everythingFrom?: string, // Renders an "Everything from X, and" string.

  buttonText?: string, // Text for the <PricingCard> button.
  buttonUrl?: string, // Optional URL for the button.

  recommendedText?: string, // For emphasized products (e.g., "Best Value").

  price: ProductItem, // Primary pricing details, e.g., "$10/month".
  priceAnnual?: ProductItem, // Optional annual pricing details.

  items: ProductItem[], // List of features or items included in the product.
}

import { PricingTable, PricingCard } from "./pricing-table";
import type { Product } from "@/types/product";

export const data: ProductsSchema = {
  "$schema": "https://www.pricecn.com/schemas/pricing.schema.json",
  "products": [{
    id: "hobby",
    name: "Hobby",
    description: "For personal projects and small-scale applications.",
    price: { primaryText: "Free", secondaryText: "up to 3 users" },
    buttonText: "Start deploying",
    items: [
      { primaryText: "Deploy full-stack apps in minutes" },
      { primaryText: "Fully-managed datastores" },
      // ...more features
    ]
  }, // ...more products
  ]
};

export const PricingTableExample = () => (
  <PricingTable products={data.products} showFeatures={true}>
    <PricingCard productId="hobby" />
    <PricingCard productId="professional" />
    <PricingCard
      productId="enterprise"
      buttonProps={{
        onClick: () => {
          console.log("Button Clicked");
        },
      }}
    />
  </PricingTable>
);