Selectable merchant offers with caller-owned trade effects.
Preview
TradesVillage marketInventory
Usage
Import Trading and TradeOffer from @/components/ui/trading. Every offer needs id, label, cost and result; each item supplies its own label and icon, with optional count. The primary example embeds the original 16 by 16 emerald and bread PNGs as data URLs, with explicit pixelated sizing. No hidden demo asset helper or network icon service is required.
onTrade receives the selected offer ID. The example increments an application counter; the component does not subtract currency, transfer inventory, enforce ownership or persist transactions.
Composition
Use secondCost for another input and inStock={false} to disable the result. Selection uses selectedId/onSelectedIdChange or defaultSelectedId. Scrolling uses scrollOffset/onScrollOffsetChange or defaultScrollOffset; at most seven offer rows are visible. Provide your own inventory React content for the inventory area.
Offer buttons expose pressed selection and result buttons have item names. The scrollbar supports arrows, PageUp/PageDown, Home/End and pointer drag; the root normalizes wheel input. Successful result activation requests the retained trade sound. At scale 2 the 276 by 166 logical-pixel screen needs 552 browser pixels; keep the supplied overflow wrapper in narrow layouts.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import * as React from "react";
import { Button } from "./button";
import { AdventureImage } from "./minecraft-adventure-image";
import { MinecraftDocumentText } from "./minecraft-document-text";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import { MinecraftText } from "./minecraft-text";
import { playTradingSound } from "./minecraft-trading-sound";
import {
TooltipProvider,Interactive playground
TradesVillage marketInventory
4Scroll through offers. The final offer is out of stock.
Verified coverage and limitations
The one-offer Bread example is different content from the nine-diamond native reference. Original screen assets and declared scrollbar rules are retained, but arbitrary icons, quantities, second inputs, inventory content, discounts and merchant progression need their own matching evidence. Inventory mutation is application behavior.
The retained playground is additional interactive reference content. It is distinct from the maintained consumer example shown under Preview. Documentation layouts and controls are web adaptations; source/reference bytes and their original provenance remain authoritative for declared cases.