33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
import React, { useState } from 'react'
|
|
|
|
export default function LikeButton({ active = false, count = 0, onToggle, label = 'Like', activeLabel = 'Liked' }) {
|
|
const [busy, setBusy] = useState(false)
|
|
|
|
const handleClick = async () => {
|
|
if (!onToggle || busy) return
|
|
setBusy(true)
|
|
try {
|
|
await onToggle()
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
disabled={busy}
|
|
className={[
|
|
'inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-all disabled:cursor-not-allowed disabled:opacity-60',
|
|
active
|
|
? 'border-rose-500/30 bg-rose-500/12 text-rose-300'
|
|
: 'border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white',
|
|
].join(' ')}
|
|
>
|
|
<i className={`fa-solid fa-fw ${busy ? 'fa-circle-notch fa-spin' : active ? 'fa-heart' : 'fa-heart'}`} />
|
|
<span>{active ? activeLabel : label}</span>
|
|
<span className="text-xs opacity-80">{Number(count || 0).toLocaleString()}</span>
|
|
</button>
|
|
)
|
|
} |