Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,429 Bytes
8f2b05f f42b4a1 8f2b05f 38d787b 8f2b05f 38d787b 8f2b05f ee69336 8f2b05f 38d787b 8f2b05f 38d787b 8f2b05f 38d787b 8f2b05f ee69336 8f2b05f 38d787b 8f2b05f 38d787b 8f2b05f 38d787b 8f2b05f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import { RiThumbUpLine } from "react-icons/ri"
import { RiThumbUpFill } from "react-icons/ri"
import { RiThumbDownLine } from "react-icons/ri"
import { RiThumbDownFill } from "react-icons/ri"
import { cn } from "@/lib/utils/cn"
import { formatLargeNumber } from "@/lib/formatters/formatLargeNumber"
export const likeButtonClassName = cn(
`flex flex-row`,
`items-center justify-center text-center`,
`h-8 lg:h-9`,
`rounded-2xl`,
`text-xs lg:text-sm font-medium`,
`bg-neutral-700/50 text-zinc-100`,
)
export function GenericLikeButton({
className,
onLike,
onDislike,
isLikedByUser = false,
isDislikedByUser = false,
numberOfLikes = 0,
numberOfDislikes = 0,
}: {
className?: string
onLike?: () => void
onDislike?: () => void
isLikedByUser?: boolean
isDislikedByUser?: boolean
numberOfLikes?: number
numberOfDislikes?: number
}) {
const classNames = cn(
likeButtonClassName,
className,
)
const nbLikes = Math.max(0, numberOfLikes)
const nbDislikes = Math.max(0, numberOfDislikes)
return (
<div className={classNames}>
<div className={cn(
`flex flex-row items-center justify-center`,
`cursor-pointer rounded-l-full overflow-hidden`,
`hover:bg-neutral-700/90`,
`space-x-1.5 lg:space-x-2 pl-2 lg:pl-3 pr-1 lg:pr-1 h-8 lg:h-9`
)}
onClick={() => {
try {
if (!isLikedByUser) onLike?.()
} catch (err) {
}}}
>
<div>{
isLikedByUser
? <RiThumbUpFill className="w-5 h-5" />
: <RiThumbUpLine className="w-5 h-5" />
}</div>
<div>{nbLikes > 0 ? formatLargeNumber(nbLikes) : ""}</div>
</div>
<div className={cn(
`flex flex-row items-center justify-center`,
`cursor-pointer rounded-r-full overflow-hidden`,
`hover:bg-neutral-700/90`,
`space-x-1.5 lg:space-x-2 pl-2 lg:pl-3 pr-2 lg:pr-3 h-8 lg:h-9`
)}
onClick={() => {
try {
if (!isDislikedByUser) onDislike?.()
} catch (err) {
}}}
>
<div className="border-l border-l-zinc-600 h-[70%]"> </div>
<div>{
isDislikedByUser
? <RiThumbDownFill className="w-5 h-5" />
: <RiThumbDownLine className="w-5 h-5" />
}</div>
<div>{nbDislikes > 0 ? formatLargeNumber(numberOfDislikes) : ""}</div>
</div>
</div>
)
} |