64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
|
import { useShowModal } from './modal'
|
||
|
|
import { useToast } from './toast'
|
||
|
|
import ItemAct from './item-act'
|
||
|
|
import AccordianItem from './accordian-item'
|
||
|
|
import { useMemo } from 'react'
|
||
|
|
import getColor from '@/lib/rainbow'
|
||
|
|
import UpBolt from '@/svgs/bolt.svg'
|
||
|
|
import styles from './upvote.module.css'
|
||
|
|
import { BoostHelp } from './adv-post-form'
|
||
|
|
import { BOOST_MULT } from '@/lib/constants'
|
||
|
|
import classNames from 'classnames'
|
||
|
|
|
||
|
|
export default function Boost ({ item, className, ...props }) {
|
||
|
|
const { boost } = item
|
||
|
|
const style = useMemo(() => (boost
|
||
|
|
? {
|
||
|
|
fill: getColor(boost),
|
||
|
|
filter: `drop-shadow(0 0 6px ${getColor(boost)}90)`,
|
||
|
|
transform: 'scaleX(-1)'
|
||
|
|
}
|
||
|
|
: {
|
||
|
|
transform: 'scaleX(-1)'
|
||
|
|
}), [boost])
|
||
|
|
return (
|
||
|
|
<Booster
|
||
|
|
item={item} As={({ ...oprops }) =>
|
||
|
|
<div className='upvoteParent'>
|
||
|
|
<div
|
||
|
|
className={styles.upvoteWrapper}
|
||
|
|
>
|
||
|
|
<UpBolt
|
||
|
|
{...props} {...oprops} style={style}
|
||
|
|
width={26}
|
||
|
|
height={26}
|
||
|
|
className={classNames(styles.upvote, className, boost && styles.voted)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function Booster ({ item, As, children }) {
|
||
|
|
const toaster = useToast()
|
||
|
|
const showModal = useShowModal()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<As
|
||
|
|
onClick={async () => {
|
||
|
|
try {
|
||
|
|
showModal(onClose =>
|
||
|
|
<ItemAct onClose={onClose} item={item} act='BOOST' step={BOOST_MULT}>
|
||
|
|
<AccordianItem header='what is boost?' body={<BoostHelp />} />
|
||
|
|
</ItemAct>)
|
||
|
|
} catch (error) {
|
||
|
|
toaster.danger('failed to boost item')
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</As>
|
||
|
|
)
|
||
|
|
}
|