CartLineItem

import * as React from "react";
const cartLineItemFixture = {
  id: "cart-line-item",
  item: {
    id: "trowel",
    name: "Forged steel trowel",
    variant: "Carbon steel / Medium",
    price: 3200,
    quantity: 2,
  },
  currency: "USD",
} satisfies {
  id: string;
  item: { id: string; name: string; variant: string; price: number; quantity: number };
  currency: string;
};
 
import { CartLineItem } from "@grassroot/ui-react";
 
export default function CartLineItemDemo() {
  const [item, setItem] = React.useState<typeof cartLineItemFixture.item | null>(
    cartLineItemFixture.item,
  );
  if (!item) return (
    <div>
      <p className="text-muted">Removed from cart.</p>
    </div>
  );
  return (
    <div>
      <CartLineItem
        item={item}
        currency={cartLineItemFixture.currency}
        onQuantityChange={(quantity) =>
          setItem((current) => (current ? { ...current, quantity } : current))
        }
        onRemove={() => setItem(null)}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const cartLineItemFixture = {
  id: "cart-line-item",
  item: {
    id: "trowel",
    name: "Forged steel trowel",
    variant: "Carbon steel / Medium",
    price: 3200,
    quantity: 2,
  },
  currency: "USD",
} satisfies {
  id: string;
  item: { id: string; name: string; variant: string; price: number; quantity: number };
  currency: string;
};
 
import { CartLineItem } from "@grassroot/ui-vue";
 
const item = ref<typeof cartLineItemFixture.item | null>(cartLineItemFixture.item);
</script>
 
<template>
  <div>
    <CartLineItem
      v-if="item"
      :item="item"
      :currency="cartLineItemFixture.currency"
      @quantity-change="item = { ...item!, quantity: $event }"
      @remove="item = null"
    />
    <p v-else class="text-muted">Removed from cart.</p>
  </div>
</template>

import { Component, signal } from "@angular/core";
const cartLineItemFixture = {
  id: "cart-line-item",
  item: {
    id: "trowel",
    name: "Forged steel trowel",
    variant: "Carbon steel / Medium",
    price: 3200,
    quantity: 2,
  },
  currency: "USD",
} satisfies {
  id: string;
  item: { id: string; name: string; variant: string; price: number; quantity: number };
  currency: string;
};
 
import { GrassrootCartLineItem } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-cart-line-item-demo",
  standalone: true,
  imports: [GrassrootCartLineItem],
  template: `
    <div>
      @if (item(); as current) {
        <grassroot-cart-line-item
          [item]="current"
          [currency]="fixture.currency"
          (quantityChange)="item.set({ ...current, quantity: $event })"
          (remove)="item.set(null)"
        />
      } @else {
        <p class="text-muted">Removed from cart.</p>
      }
    </div>
  `,
})
export class CartLineItemDemoComponent {
  protected readonly fixture = cartLineItemFixture;
  readonly item = signal<typeof cartLineItemFixture.item | null>(cartLineItemFixture.item);
}
 
export default CartLineItemDemoComponent;

<script lang="ts">
  import { CartLineItem } from "@grassroot/ui-svelte";
  const cartLineItemFixture = {
    id: "cart-line-item",
    item: {
      id: "trowel",
      name: "Forged steel trowel",
      variant: "Carbon steel / Medium",
      price: 3200,
      quantity: 2,
    },
    currency: "USD",
  } satisfies {
    id: string;
    item: { id: string; name: string; variant: string; price: number; quantity: number };
    currency: string;
  };
 
  let item = $state<typeof cartLineItemFixture.item | null>(cartLineItemFixture.item);
</script>
 
<div>
  {#if item}
    <CartLineItem
      {item}
      currency={cartLineItemFixture.currency}
      onQuantityChange={(quantity) => (item = { ...item!, quantity })}
      onRemove={() => (item = null)}
    />
  {:else}
    <p class="text-muted">Removed from cart.</p>
  {/if}
</div>

/** @jsxImportSource solid-js */
import { createSignal, Show } from "solid-js";
const cartLineItemFixture = {
  id: "cart-line-item",
  item: {
    id: "trowel",
    name: "Forged steel trowel",
    variant: "Carbon steel / Medium",
    price: 3200,
    quantity: 2,
  },
  currency: "USD",
} satisfies {
  id: string;
  item: { id: string; name: string; variant: string; price: number; quantity: number };
  currency: string;
};
 
import { CartLineItem } from "@grassroot/ui-solid";
 
export default function CartLineItemDemo() {
  const [item, setItem] = createSignal<typeof cartLineItemFixture.item | null>(
    cartLineItemFixture.item,
  );
 
  return (
    <div>
      <Show when={item()} fallback={<p class="text-muted">Removed from cart.</p>}>
        {(current) => (
          <CartLineItem
            item={current()}
            currency={cartLineItemFixture.currency}
            onQuantityChange={(quantity) =>
              setItem((prev) => (prev ? { ...prev, quantity } : prev))
            }
            onRemove={() => setItem(null)}
          />
        )}
      </Show>
    </div>
  );
}