Like and Share

<LikeButton listing={listing} icon={<Bookmark />} likedIcon={<BookmarkCheck className="text-[color:var(--panda-primary)]" />} />

"use client"
import { useLike } from "@pandaidx/widgets/client"

export const SaveChip = ({ listing }) => {
  const { liked, toggle, pending } = useLike(listing)
  return <button type="button" aria-pressed={liked} disabled={pending} onClick={toggle}>{liked ? "Saved" : "Save"}</button>
}

"use client"
import Image from "next/image"
import { useState } from "react"
import { ListingActionsMenu, useShare } from "@pandaidx/widgets/client"

const ShareSheet = ({ url, title, image, onClose }) => {
  const share = useShare({ url, title, image, context: "property" })
  return (
    <dialog open className="rounded-card bg-background p-0 shadow-raised">
      {image ? <Image src={image} alt={title} width={640} height={288} className="h-72 w-full object-cover" /> : null}
      <div className="flex flex-col gap-3 p-5">
        <h2>{title}</h2>
        <div className="flex flex-wrap gap-2">
          {share.channels.map((channel) => <button key={channel.id} type="button" onClick={channel.open}>{channel.label}</button>)}
          <button type="button" onClick={() => void share.copy()}>{share.copied ? "Copied" : "Copy link"}</button>
        </div>
        <button type="button" onClick={onClose}>Close</button>
      </div>
    </dialog>
  )
}

export const ListingRowMenu = ({ listing }) => {
  const [sharing, setSharing] = useState(null)
  return (
    <>
      <ListingActionsMenu listing={listing} onShare={() => setSharing({ url: `${location.origin}/mls/${listing._id}`, title: listing.UnparsedAddress, image: listing.image })} />
      {sharing ? <ShareSheet {...sharing} onClose={() => setSharing(null)} /> : null}
    </>
  )
}