دکمهی پسندیدن
like-buttonانیمیشنقلب پر میشه و میپره، هشت ذرهی ریز به اطراف میپاشن و شمارنده با ظهور عدد جدید بالا میره؛ برداشتن لایک فقط رنگ را برمیگردونه.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add like-buttonنصب دستی
محتوای تب «کد» را در
components/animations/like-button.tsxبگذارید. کلیدفریم را هم بهglobals.cssاضافه کنید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { LikeButton } from "@/components/animations/like-button"23<LikeButton count={128} onChange={(liked) => …} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| liked / defaultLiked | boolean | - | کنترلشده یا اولیه. |
| count | number | - | تعداد لایک بقیه؛ لایک خود کاربر روش اضافه میشه. |
| onChange | (liked) => void | - | بعد از هر تغییر. |