Promotion Code

从胶囊提示平滑展开为完整输入框的优惠码组件。

交互方式

点击展开并输入优惠码，Apply 后转圈 1.2 秒。JUNGUI 显示绿色勾和 Applied，其他代码显示红框、轻晃和错误提示；修改后可重试。也可点击下方演示成功／失败，重置后收起。深浅配色跟随右上角主题。

使用示例

"use client"
import { useState } from "react"
import { PromotionCode } from "@/components/ui/promotion-code"

export function Demo() {
  const [code, setCode] = useState("")
  return <PromotionCode value={code} onValueChange={setCode} onApply={(value) => console.log(value)} />
}

参数

参数	类型 / 默认值	说明
`theme`	`"light" \| "dark"`"light"	显式指定深浅配色，独立使用时不依赖站点主题。
`value`	`string`	受控输入值。
`defaultValue`	`string`""	非受控初始输入值。
`onValueChange`	`(value: string) => void`	输入变化回调。
`onApply`	`(code: string) => void`	点击 Apply 或按 Enter 时传入去除首尾空格的代码。
`placeholder`	`string`"Add promotion code"	胶囊文案、占位符及默认无障碍名称。
`applyLabel`	`string`"Apply"	应用按钮文案。
`loadingLabel`	`string`"Applying…"	加载按钮文案。
`loading`	`boolean`false	外部控制加载状态，期间禁止编辑和重复提交。
`error`	`string`	外部控制错误文案。
`...inputProps`	`ComponentProps<"input">`	透传 name、disabled、readOnly、aria 属性与输入事件。
`success`	`boolean`false	外部控制成功状态，显示绿色勾并阻止重复提交；修改值后由使用者重置。
`successLabel`	`string`"Applied"	成功按钮文案和无障碍状态播报。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxtailwind-merge

components/ui/promotion-code.css
components/ui/promotion-code.tsx
lib/utils.ts

来源

https://stripe.com/payments/checkout