MiniCart

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

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

import { Component, signal } from "@angular/core";
import { GrassrootButton, GrassrootMiniCart } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootButton, GrassrootMiniCart],
  template: `
    <grassroot-button
      variant="secondary"
      (click)="open.set(true)"
    >Open cart</grassroot-button>
    <grassroot-mini-cart [open]="open()" [items]="items" [shipping]="800" [taxRate]="0.2" />
  `,
})
export class ExampleComponent {
  readonly items = [
    { id: "tee", name: "Heavyweight tee", price: 3200, quantity: 1 },
    { id: "cap", name: "Corduroy cap", price: 2400, quantity: 2 },
  ];
  readonly open = signal(false);
}

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

import { createSignal } from "solid-js";
import { Button, MiniCart } from "@grassroot/ui-solid";
 
const items = [
  { id: "tee", name: "Heavyweight tee", price: 3200, quantity: 1 },
  { id: "cap", name: "Corduroy cap", price: 2400, quantity: 2 },
];
 
export function Example() {
  const [open, setOpen] = createSignal(false);
 
  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Open cart</Button>
      <MiniCart
        open={open()}
        onClose={() => setOpen(false)}
        items={items}
        shipping={800}
        taxRate={0.2}
      />
    </>
  );
}