hq/Bpistle
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: adjust the style of NoteStats (#222)

Browse source
This commit is contained in:
Cody Tseng 2025-03-07 23:39:46 +08:00 • committed by GitHub
parent 71895e3a0f
commit accf3319e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 417 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/NoteStats/ZapButton.tsx
View file

@ -18,6 +18,7 @@ export default function ZapButton({ event }: { event: Event }) {
const { checkLogin, pubkey } = useNostr()
const { noteStatsMap, addZap } = useNoteStats()
const { defaultZapSats, defaultZapComment, quickZap } = useZap()
const [touchStart, setTouchStart] = useState<{ x: number; y: number } | null>(null)
const [openZapDialog, setOpenZapDialog] = useState(false)
const [zapping, setZapping] = useState(false)
const { zapAmount, hasZapped } = useMemo(() => {
@ -71,6 +72,11 @@ export default function ZapButton({ event }: { event: Event }) {
e.preventDefault()
isLongPressRef.current = false
if ('touches' in e) {
const touch = e.touches[0]
setTouchStart({ x: touch.clientX, y: touch.clientY })
}
if (quickZap) {
timerRef.current = setTimeout(() => {
isLongPressRef.current = true
@ -89,6 +95,15 @@ export default function ZapButton({ event }: { event: Event }) {
clearTimeout(timerRef.current)
}
if ('touches' in e) {
setTouchStart(null)
if (!touchStart) return
const touch = e.changedTouches[0]
const diffX = Math.abs(touch.clientX - touchStart.x)
const diffY = Math.abs(touch.clientY - touchStart.y)
if (diffX > 10 || diffY > 10) return
}
if (!quickZap) {
checkLogin(() => {
setOpenZapDialog(true)
@ -110,7 +125,7 @@ export default function ZapButton({ event }: { event: Event }) {
<>
<button
className={cn(
'flex items-center enabled:hover:text-yellow-400 gap-1 select-none',
'flex items-center enabled:hover:text-yellow-400 gap-1 select-none px-3 h-full',
hasZapped ? 'text-yellow-400' : 'text-muted-foreground'
)}
title={t('Zap')}
@ -121,9 +136,9 @@ export default function ZapButton({ event }: { event: Event }) {
onTouchEnd={handleClickEnd}
>
{zapping ? (
<Loader className="animate-spin" size={16} />
<Loader className="animate-spin" />
) : (
<Zap size={16} className={hasZapped ? 'fill-yellow-400' : ''} />
<Zap className={hasZapped ? 'fill-yellow-400' : ''} />
)}
{!!zapAmount && <div className="text-sm">{formatAmount(zapAmount)}</div>}
</button>