SummaryTable

import { Body1, SummaryTable } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function SummaryTableOrderPreview() {
  return (
    <PreviewLayout>
      <SummaryTable
        title="Order summary"
        items={[
          { label: "Subtotal", value: "$120.00" },
          { label: "Discount", value: "−$12.00" },
          { label: "Tax", value: "$9.60" },
          // Kit has no `emphasised` flag — bold the total via a ReactNode
          // value/label, which SummaryTable renders as-is.
          {
            label: <Body1 weight="semibold">Total</Body1>,
            value: <Body1 weight="semibold">$117.60</Body1>,
          },
        ]}
      />
    </PreviewLayout>
  )
}

import { Body1, SummaryTable } from "@appboxo/ui-kit"

import { PreviewLayout } from "./_section"

export function SummaryTableLoyaltyPreview() {
  return (
    <PreviewLayout>
      <SummaryTable
        title="Loyalty balance"
        items={[
          { label: "Starting balance", value: "12,480 pts" },
          { label: "Earned this month", value: "+1,200 pts" },
          { label: "Redeemed", value: "−800 pts" },
          {
            label: <Body1 weight="semibold">Current balance</Body1>,
            value: <Body1 weight="semibold">12,880 pts</Body1>,
          },
        ]}
      />
    </PreviewLayout>
  )
}