import type { ComponentProps, CSSProperties } from "react"; import { cn } from "cn"; import { Card } from "@/components/card"; import { Pick, PickGroup, type PickGroupProps, type PickProps, } from "@/components/pick"; export type MoneylineCardProps = ComponentProps<"div"> & { /** The card washes from the home colour into the away colour. */ homeColor: string; awayColor: string; }; /** Who wins, and nothing else: both teams over a wash of their colours. */ function MoneylineCard({ homeColor, awayColor, className, style, ...props }: MoneylineCardProps) { return ( ); } export type MoneylineCardLogosProps = ComponentProps<"div">; /** One logo over each pick, in as many columns as it has children. */ function MoneylineCardLogos({ className, ...props }: MoneylineCardLogosProps) { return (

); } export type MoneylineCardLogoProps = ComponentProps<"div">; /** Fits a `Helmet`, a crest `` or any art to the logo box. */ function MoneylineCardLogo({ className, ...props }: MoneylineCardLogoProps) { return (

); } export type MoneylineCardPicksProps = PickGroupProps; /** * The sides, one column each: two for a winner, three with a draw between. * At most one is pressed, and pressing it again takes the pick back. */ function MoneylineCardPicks({ className, ...props }: MoneylineCardPicksProps) { return ( ); } export type MoneylineCardPickProps = Omit; /** A glass tile that rings in the pick colour and floods its price. */ function MoneylineCardPick({ className, ...props }: MoneylineCardPickProps) { return ( ); } export type MoneylineCardTeamProps = ComponentProps<"span">; function MoneylineCardTeam({ className, ...props }: MoneylineCardTeamProps) { return ( ); } export type MoneylineCardLabelProps = ComponentProps<"span">; /** Under the team, e.g. `to win`. */ function MoneylineCardLabel({ className, ...props }: MoneylineCardLabelProps) { return ( ); } export type MoneylineCardPriceProps = ComponentProps<"span">; /** The payout in a pill that floods with the pick colour once picked. */ function MoneylineCardPrice({ className, ...props }: MoneylineCardPriceProps) { return ( ); } export { MoneylineCard, MoneylineCardLogos, MoneylineCardLogo, MoneylineCardPicks, MoneylineCardPick, MoneylineCardTeam, MoneylineCardLabel, MoneylineCardPrice, };

To win

Three-way

Code