Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
4.7 kB · 147 lines
TSX
at perf/paste
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148"use client";import { useContext, useState } from "react";import { Separator } from "./Layout";import { CommentTiny } from "./Icons/CommentTiny";import { useSmoker } from "./Toast";import { Tag } from "./Tags";import { Popover } from "./Popover";import { TagTiny } from "./Icons/TagTiny";import { RecommendButton } from "./RecommendButton";import { DiscussionModal } from "./DiscussionModal";import { DrawerThreadContext } from "app/(app)/lish/[did]/[publication]/[rkey]/Interactions/drawerThreadContext";
export const InteractionPreview = (props: { quotesCount: number; commentsCount: number; recommendsCount: number; documentUri: string; tags?: string[]; postUrl: string; title?: string; showComments: boolean; showMentions: boolean; showRecommends: boolean;
share?: boolean;}) => { let smoker = useSmoker(); // Inside a published post body a DrawerThreadContext is in scope; there we // open this post's discussion in the interaction drawer (like a Bluesky post's // thread) instead of the standalone modal used in listings/feeds. let drawerNav = useContext(DrawerThreadContext); let [discussionsOpen, setDiscussionsOpen] = useState(false); let commentsAvailable = props.showComments !== false && props.commentsCount > 0; let mentionsAvailable = props.showMentions && props.quotesCount > 0; let discussionsAvailable = commentsAvailable || mentionsAvailable; let interactionsAvailable = discussionsAvailable || (props.showRecommends !== false && props.recommendsCount > 0);
const tagsCount = props.tags?.length || 0;
return ( <div className={`flex gap-2 text-tertiary text-sm items-center`}> {props.showRecommends === false ? null : ( <RecommendButton documentUri={props.documentUri} recommendsCount={props.recommendsCount} /> )}
{!discussionsAvailable ? null : ( <button aria-label="Post discussions" onClick={(e) => { e.preventDefault(); e.stopPropagation(); if (drawerNav) drawerNav.push({ type: "standardSitePost", uri: props.documentUri, }); else setDiscussionsOpen(true); }} className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast text-tertiary" > <CommentTiny /> {props.commentsCount + props.quotesCount} </button> )} {discussionsAvailable && !drawerNav && ( <DiscussionModal open={discussionsOpen} onOpenChange={setDiscussionsOpen} document_uri={props.documentUri} postUrl={props.postUrl} title={props.title} commentsCount={props.commentsCount} quotesCount={props.quotesCount} showComments={props.showComments} showMentions={props.showMentions} /> )} {tagsCount === 0 ? null : ( <> {interactionsAvailable ? <Separator classname="h-4!" /> : null} <TagPopover tags={props.tags!} /> </> )} {props.share && ( <> <Separator classname="h-4!" />
<button id={`copy-post-link-${props.postUrl}`} className="flex gap-1 items-center hover:text-accent-contrast relative" onClick={(e) => { e.stopPropagation(); e.preventDefault(); let mouseX = e.clientX; let mouseY = e.clientY;
if (!props.postUrl) return; navigator.clipboard.writeText(props.postUrl);
smoker({ text: <strong>Copied Link!</strong>, position: { y: mouseY, x: mouseX, }, }); }} > Share </button> </> )} </div> );};
export const TagPopover = (props: { tags: string[] }) => { return ( <Popover className="p-2! max-w-xs" trigger={ <div className="relative flex gap-1 items-center hover:text-accent-contrast" aria-label={`${props.tags.length} tag${props.tags.length === 1 ? "" : "s"}`} > <TagTiny aria-hidden /> {props.tags.length} </div> } > <TagList tags={props.tags} className="text-secondary!" /> </Popover> );};
const TagList = (props: { tags: string[]; className?: string }) => { return ( <div className="flex gap-1 flex-wrap" role="list" aria-label="Tags"> {props.tags.map((tag, index) => ( <Tag name={tag} key={index} className={props.className} /> ))} </div> );};