A market detail panel for buying and selling shares in a binary outcome (e.g. a prediction market), with odds tabs, an animated amount input, quick-amount chips and a stateful trade/connect button.
import {
PredictionMarket,
type PredictionMarketOrderValue,
} from "@/components/ui/prediction-market";
import { useState } from "react";
const outcomes = [
{ id: "yes", label: "Yes", price: 0.167 },
{ id: "no", label: "No", price: 0.834 },
];
export function PredictionMarketPreview() {
const [order, setOrder] = useState<PredictionMarketOrderValue>({
mode: "buy",
outcomeId: "yes",
amount: "115",
});
return (
<div className="flex w-full items-center justify-center">
<PredictionMarket
outcomes={outcomes}
value={order}
onValueChange={setOrder}
balance={500}
positions={{ yes: 125, no: 48 }}
quickAmounts={[1, 5, 10, 100]}
/>
</div>
);
}
export default PredictionMarketPreview;