Build a free-shipping progress bar with Tailwind CSS: a line stating the threshold, a progress bar filled by the current basket total, and a dynamic hint ('Add ¥23 more for free shipping') that updates as the cart changes. Turn the bar accent-colored and swap the copy to 'Free shipping unlocked' once the threshold is passed. Keep it compact enough for a cart drawer header.
提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。