Components
Starting preview...
A component of social media sharing buttons with Number Flow animations
@barvian
npx shadcn@latest add https://21st.dev/r/barvian/activity-with-number-flowimport { useState } from "react"
import { Activity } from "@/components/ui/activity-with-number-flow"
function ActivityDemo() {
const [stats, setStats] = useState({
likes: 1523,
reposts: 284,
views: 15794,
bookmarks: 432,
liked: false,
reposted: false,
bookmarked: false,
})
const handleLike = () => {
setStats(prev => ({
...prev,
likes: prev.liked ? prev.likes - 1 : prev.likes + 1,
liked: !prev.liked
}))
}
const handleRepost = () => {
setStats(prev => ({
...prev,
reposts: prev.reposted ? prev.reposts - 1 : prev.reposts + 1,
reposted: !prev.reposted
}))
}
const handleBookmark = () => {
setStats(prev => ({
...prev,
bookmarks: prev.bookmarked ? prev.bookmarks - 1 : prev.bookmarks + 1,
bookmarked: !prev.bookmarked
}))
}
return (
<div className="w-full max-w-xl rounded-lg border border-zinc-200 p-4 dark:border-zinc-800">
<div className="mb-4 h-48 rounded-md bg-zinc-100 dark:bg-zinc-800" />
<Activity
likes={stats.likes}
reposts={stats.reposts}
views={stats.views}
bookmarks={stats.bookmarks}
liked={stats.liked}
reposted={stats.reposted}
bookmarked={stats.bookmarked}
onLike={handleLike}
onRepost={handleRepost}
onBookmark={handleBookmark}
/>
</div>
)
}
export default { ActivityDemo };