Other Widget

四个独立小部件：CurrencyConverter / RatingStars / ImageGrid / ProductRow。

CurrencyConverter

货币兑换卡片。两个输入 + 汇率说明 + Convert 按钮。3 种按钮色。

import { CurrencyConverter, RatingStars, ImageGrid, ProductRow } from "@forge-ui/react";

Exchange

Live rates

1 USD = 0.92 EUR

1<CurrencyConverter
2  title="Exchange"
3  subtitle="Live rates"
4  fromCurrency="USD"
5  toCurrency="EUR"
6  exchangeRateText="1 USD = 0.92 EUR"
7/>

Attribute	Type	Default	Description
`title / subtitle`	`string`	`'Title Here' / 'Text here'`	卡片头部文案。
`color`	`'purple' \| 'blue' \| 'dark'`	`'purple'`	Convert 按钮颜色。
`fromCurrency / toCurrency`	`string`	`'USD'`	两个输入框的货币代码。
`fromValue / toValue`	`string`	`—`	受控值。传了就用 controlled 模式，不传用 placeholder。
`exchangeRateText`	`string`	`'1 EUR = 1.09 USD'`	底部汇率说明。
`onConvert / onFromChange / onToChange`	`() => void \| (v: string) => void`	`—`	交互回调。

评分星级。数字 + N 颗星（solar-icon-set StarBold）。

4.2/5

1<RatingStars value={4.2} />

3 种尺寸，md 为默认（16px 星 + 14px 字号）。

4.2/5

1<RatingStars value={4.2} size="sm" />
2<RatingStars value={4.2} size="md" />
3<RatingStars value={4.2} size="lg" />

Attribute	Type	Default	Description
`value`	`number`	`—`	评分值，0-5（或自定义 total）。
`total`	`number`	`5`	总星数。
`showValue`	`boolean`	`true`	是否显示 "X.X/N" 数字。
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸。

水平图片排列，支持尾部 +N 占位。

1<ImageGrid images={urls} overflowCount={3} />

Attribute	Type	Default	Description
`images`	`string[]`	`—`	图片 URL 数组，横向并列渲染。
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	单图尺寸（sm 48 / md 64 / lg 80）。
`overflowCount`	`number`	`—`	尾部 +N 占位，> 0 时才渲染。
`overflowClassName`	`string`	`purple`	溢出块的配色 class，默认紫色调。

紧凑产品行：44×44 缩略图 + 标题 + 副标题。无外框，常用在 list / dropdown 里。

Product Name3 Variants

1<ProductRow
2  image="https://i.pravatar.cc/44?img=20"
3  title="Product Name"
4  subtitle="3 Variants"
5/>

Attribute	Type	Default	Description
`image`	`string`	`—`	左侧 44×44 缩略图 URL。
`imageSlot`	`ReactNode`	`—`	自定义图槽（优先级高于 image）。
`title`	`string`	`—`	主标题。
`subtitle`	`string`	`—`	副标题。