79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { Entity, MegalodonInterface } from 'megalodon'
|
|
import { useRouter } from 'next/router'
|
|
import { FaBookmark, FaEllipsis, FaReply, FaRetweet, FaStar } from 'react-icons/fa6'
|
|
|
|
type Props = {
|
|
status: Entity.Status
|
|
client: MegalodonInterface
|
|
onRefresh: () => void
|
|
}
|
|
|
|
export default function Actions(props: Props) {
|
|
const router = useRouter()
|
|
|
|
const reply = async () => {
|
|
router.push({ query: { id: router.query.id, timeline: router.query.timeline, reply_target_id: props.status.id, detail: true } })
|
|
}
|
|
|
|
const reblog = async () => {
|
|
if (props.status.reblogged) {
|
|
await props.client.unreblogStatus(props.status.id)
|
|
} else {
|
|
await props.client.reblogStatus(props.status.id)
|
|
}
|
|
props.onRefresh()
|
|
}
|
|
|
|
const favourite = async () => {
|
|
if (props.status.favourited) {
|
|
await props.client.unfavouriteStatus(props.status.id)
|
|
} else {
|
|
await props.client.favouriteStatus(props.status.id)
|
|
}
|
|
props.onRefresh()
|
|
}
|
|
|
|
const bookmark = async () => {
|
|
if (props.status.bookmarked) {
|
|
await props.client.unbookmarkStatus(props.status.id)
|
|
} else {
|
|
await props.client.bookmarkStatus(props.status.id)
|
|
}
|
|
props.onRefresh()
|
|
}
|
|
|
|
return (
|
|
<div className="flex gap-6">
|
|
<FaReply className={`w-4 text-gray-400 cursor-pointer hover:text-gray-600`} onClick={reply} />
|
|
<FaRetweet className={`${retweetColor(props.status)} w-4 cursor-pointer hover:text-gray-600`} onClick={reblog} />
|
|
<FaStar className={`${favouriteColor(props.status)} w-4 cursor-pointer hover:text-gray-600`} onClick={favourite} />
|
|
<FaBookmark className={`${bookmarkColor(props.status)} w-4 cursor-pointer hover:text-gray-600`} onClick={bookmark} />
|
|
<FaEllipsis className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const retweetColor = (status: Entity.Status) => {
|
|
if (status.reblogged) {
|
|
return 'text-blue-600'
|
|
} else {
|
|
return 'text-gray-400'
|
|
}
|
|
}
|
|
|
|
const favouriteColor = (status: Entity.Status) => {
|
|
if (status.favourited) {
|
|
return 'text-orange-400'
|
|
} else {
|
|
return 'text-gray-400'
|
|
}
|
|
}
|
|
|
|
const bookmarkColor = (status: Entity.Status) => {
|
|
if (status.bookmarked) {
|
|
return 'text-rose-500'
|
|
} else {
|
|
return 'text-gray-400'
|
|
}
|
|
}
|