MiniCart

import * as React from "react";
const miniCartFixture = {
  id: "mini-cart",
  triggerLabel: "Open cart",
  items: [
    { id: "tee", name: "Heavyweight tee", price: 3200, quantity: 1 },
    { id: "cap", name: "Corduroy cap", price: 2400, quantity: 2 },
  ],
  shipping: 800,
  taxRate: 0.2,
} satisfies {
  id: string;
  triggerLabel: string;
  items: Array<{ id: string; name: string; price: number; quantity: number }>;
  shipping: number;
  taxRate: number;
};
 
import { Button, MiniCart } from "@grassroot/ui-react";
 
export default function MiniCartDemo() {
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        {miniCartFixture.triggerLabel}
      </Button>
      <MiniCart
        open={open}
        onClose={() => setOpen(false)}
        items={miniCartFixture.items}
        shipping={miniCartFixture.shipping}
        taxRate={miniCartFixture.taxRate}
        onCheckout={() => setOpen(false)}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const miniCartFixture = {
  id: "mini-cart",
  triggerLabel: "Open cart",
  items: [
    { id: "tee", name: "Heavyweight tee", price: 3200, quantity: 1 },
    { id: "cap", name: "Corduroy cap", price: 2400, quantity: 2 },
  ],
  shipping: 800,
  taxRate: 0.2,
} satisfies {
  id: string;
  triggerLabel: string;
  items: Array<{ id: string; name: string; price: number; quantity: number }>;
  shipping: number;
  taxRate: number;
};
 
import { Button, MiniCart } from "@grassroot/ui-vue";
 
const open = ref(false);
</script>
 
<template>
  <div>
    <Button variant="secondary" @click="open = true">{{ miniCartFixture.triggerLabel }}</Button>
    <MiniCart
      v-model:open="open"
      :items="miniCartFixture.items"
      :shipping="miniCartFixture.shipping"
      :tax-rate="miniCartFixture.taxRate"
      @checkout="open = false"
    />
  </div>
</template>

import { Component, signal } from "@angular/core";
const miniCartFixture = {
  id: "mini-cart",
  triggerLabel: "Open cart",
  items: [
    { id: "tee", name: "Heavyweight tee", price: 3200, quantity: 1 },
    { id: "cap", name: "Corduroy cap", price: 2400, quantity: 2 },
  ],
  shipping: 800,
  taxRate: 0.2,
} satisfies {
  id: string;
  triggerLabel: string;
  items: Array<{ id: string; name: string; price: number; quantity: number }>;
  shipping: number;
  taxRate: number;
};
 
import { GrassrootButton, GrassrootMiniCart } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-mini-cart-demo",
  standalone: true,
  imports: [GrassrootButton, GrassrootMiniCart],
  template: `
    <div>
      <grassroot-button variant="secondary" (click)="open.set(true)">{{
        fixture.triggerLabel
      }}</grassroot-button>
      <grassroot-mini-cart
        [open]="open()"
        (openChange)="open.set($event)"
        [items]="fixture.items"
        [shipping]="fixture.shipping"
        [taxRate]="fixture.taxRate"
        (checkout)="open.set(false)"
      />
    </div>
  `,
})
export class MiniCartDemoComponent {
  protected readonly fixture = miniCartFixture;
  readonly open = signal(false);
}
 
export default MiniCartDemoComponent;

<script lang="ts">
  import { Button, MiniCart } from "@grassroot/ui-svelte";
  const miniCartFixture = {
    id: "mini-cart",
    triggerLabel: "Open cart",
    items: [
      { id: "tee", name: "Heavyweight tee", price: 3200, quantity: 1 },
      { id: "cap", name: "Corduroy cap", price: 2400, quantity: 2 },
    ],
    shipping: 800,
    taxRate: 0.2,
  } satisfies {
    id: string;
    triggerLabel: string;
    items: Array<{ id: string; name: string; price: number; quantity: number }>;
    shipping: number;
    taxRate: number;
  };
 
  let open = $state(false);
</script>
 
<div>
  <Button variant="secondary" onClick={() => (open = true)}>{miniCartFixture.triggerLabel}</Button>
  <MiniCart
    {open}
    onClose={() => (open = false)}
    items={miniCartFixture.items}
    shipping={miniCartFixture.shipping}
    taxRate={miniCartFixture.taxRate}
    onCheckout={() => (open = false)}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Button, MiniCart } from "@grassroot/ui-solid";
const miniCartFixture = {
  id: "mini-cart",
  triggerLabel: "Open cart",
  items: [
    { id: "tee", name: "Heavyweight tee", price: 3200, quantity: 1 },
    { id: "cap", name: "Corduroy cap", price: 2400, quantity: 2 },
  ],
  shipping: 800,
  taxRate: 0.2,
} satisfies {
  id: string;
  triggerLabel: string;
  items: Array<{ id: string; name: string; price: number; quantity: number }>;
  shipping: number;
  taxRate: number;
};
 
export default function MiniCartDemo() {
  const [open, setOpen] = createSignal(false);
 
  return (
    <div>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        {miniCartFixture.triggerLabel}
      </Button>
      <MiniCart
        open={open()}
        onClose={() => setOpen(false)}
        items={miniCartFixture.items}
        shipping={miniCartFixture.shipping}
        taxRate={miniCartFixture.taxRate}
        onCheckout={() => setOpen(false)}
      />
    </div>
  );
}