CartLineItem

import { CartLineItem } from "@grassroot/ui-react";
import * as React from "react";
 
const item = { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 };
 
const [quantity, setQuantity] = React.useState(item.quantity);
 
<CartLineItem
  item={{ ...item, quantity: quantity }}
  onQuantityChange={(next) => setQuantity(next)}
  onRemove={() => {}}
/>

<script setup lang="ts">
import { ref } from "vue";
import { CartLineItem } from "@grassroot/ui-vue";
 
const item = { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 };
 
const quantity = ref(item.quantity);
</script>
 
<template>
  <CartLineItem
    :item="{ ...item, quantity: quantity }"
    @quantity-change="quantity = next"
    @remove="undefined"
  />
</template>

<script lang="ts">
  import { CartLineItem } from "@grassroot/ui-svelte";
 
  const item = { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 };
 
  let quantity = $state(item.quantity);
</script>
 
<CartLineItem
  item={{ ...item, quantity: quantity }}
  onQuantityChange={(next) => quantity = next}
  onRemove={() => {}}
/>

import { createSignal } from "solid-js";
import { CartLineItem } from "@grassroot/ui-solid";
 
const item = { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 };
 
export function Example() {
  const [quantity, setQuantity] = createSignal(item.quantity);
 
  return (
    <>
      <CartLineItem
        item={{ ...item, quantity: quantity() }}
        onQuantityChange={(next) => setQuantity(next)}
        onRemove={() => {}}
      />
    </>
  );
}