OrderSummary

import { OrderSummary } from "@grassroot/ui-react";
 
const orderItems = [
  { id: "seed", name: "Heirloom seed packet", price: 1800, quantity: 2, variant: "Tomato / Brandywine" },
  { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
];
 
<OrderSummary items={orderItems} shipping={800} taxRate={0.2} discount={500} onCheckout={() => {}} />

<script setup lang="ts">
import { OrderSummary } from "@grassroot/ui-vue";
 
const orderItems = [
  { id: "seed", name: "Heirloom seed packet", price: 1800, quantity: 2, variant: "Tomato / Brandywine" },
  { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
];
</script>
 
<template>
  <OrderSummary
    :items="orderItems"
    :shipping="800"
    :tax-rate="0.2"
    :discount="500"
    @checkout="undefined"
  />
</template>

import { Component } from "@angular/core";
import { GrassrootOrderSummary } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootOrderSummary],
  template: `
    <grassroot-order-summary
      [items]="orderItems"
      [shipping]="800"
      [taxRate]="0.2"
      [discount]="500"
      (checkout)="undefined"
    />
  `,
})
export class ExampleComponent {
  readonly orderItems = [
    { id: "seed", name: "Heirloom seed packet", price: 1800, quantity: 2, variant: "Tomato / Brandywine" },
    { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
  ];
}

<script lang="ts">
  import { OrderSummary } from "@grassroot/ui-svelte";
 
  const orderItems = [
    { id: "seed", name: "Heirloom seed packet", price: 1800, quantity: 2, variant: "Tomato / Brandywine" },
    { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
  ];
</script>
 
<OrderSummary
  items={orderItems}
  shipping={800}
  taxRate={0.2}
  discount={500}
  onCheckout={() => {}}
/>

import { OrderSummary } from "@grassroot/ui-solid";
 
const orderItems = [
  { id: "seed", name: "Heirloom seed packet", price: 1800, quantity: 2, variant: "Tomato / Brandywine" },
  { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
];
 
export function Example() {
  return (
    <>
      <OrderSummary
        items={orderItems}
        shipping={800}
        taxRate={0.2}
        discount={500}
        onCheckout={() => {}}
      />
    </>
  );
}