import { User } from 'common/user' import { useState } from 'react' import { TextButton } from 'web/components/text-button' import { Modal } from 'web/components/layout/modal' import { Col } from 'web/components/layout/col' import { useUserLikedContracts } from 'web/hooks/use-likes' import { SiteLink } from 'web/components/site-link' import { Row } from 'web/components/layout/row' import { XIcon } from '@heroicons/react/outline' import { unLikeItem } from 'web/lib/firebase/likes' import { contractPath } from 'web/lib/firebase/contracts' export function UserLikesButton(props: { user: User; className?: string }) { const { user, className } = props const [isOpen, setIsOpen] = useState(false) const likedContracts = useUserLikedContracts(user.id) return ( <> setIsOpen(true)} className={className}> {likedContracts?.length ?? ''}{' '} Likes Liked Markets {likedContracts?.map((likedContract) => ( {likedContract.question} unLikeItem(user.id, likedContract.id)} /> ))} ) }