import { useState } from "react"; import { usePopper } from "react-popper"; import { List } from "lucide-react"; // document editor import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor"; // helpers import { cn } from "@/helpers/common.helper"; // components import { PageContentBrowser } from "./content-browser"; type Props = { editorRef: EditorRefApi | EditorReadOnlyRefApi | null; isFullWidth: boolean; markings: IMarking[]; sidePeekVisible: boolean; setSidePeekVisible: (sidePeekState: boolean) => void; }; export const PageSummaryPopover: React.FC<Props> = (props) => { const { editorRef, markings, sidePeekVisible, setSidePeekVisible } = props; // refs const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null); const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null); // popper-js const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } = usePopper( referenceElement, popperElement, { placement: "bottom-start", } ); return ( <div className="group/summary-popover w-min whitespace-nowrap"> <button type="button" ref={setReferenceElement} className={`grid h-7 w-7 place-items-center rounded ${ sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300" }`} onClick={() => setSidePeekVisible(!sidePeekVisible)} > <List className="h-4 w-4" /> </button> <div className={cn("block md:hidden", { // "md:hidden": !isFullWidth, })} > {sidePeekVisible && ( <div className="z-10 max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg" ref={setPopperElement} style={summaryPopoverStyles.popper} {...summaryPopoverAttributes.popper} > <PageContentBrowser setSidePeekVisible={setSidePeekVisible} editorRef={editorRef} markings={markings} /> </div> )} </div> <div className="hidden md:block"> {!sidePeekVisible && ( <div className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block" ref={setPopperElement} style={summaryPopoverStyles.popper} {...summaryPopoverAttributes.popper} > <PageContentBrowser editorRef={editorRef} markings={markings} /> </div> )} </div> </div> ); };