Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112import React from "react";import { DownloadSimple, Trash, Eraser } from "@phosphor-icons/react";import { Modal, IconButton } from "./ui.jsx";import { downloadText } from "./api.js";import { Markdown } from "./Markdown.jsx";
export function HighlightsDialog({ open, onOpenChange, material, highlights, onJump, onNoteChange, onNoteSave, onRemove, onClearNote, onEditNote, onCard,}) { function exportHighlights() { const sections = highlights.map( (highlight) => `> ${highlight.quote}\n\n${highlight.page ? "Page " + highlight.page + "\n\n" : ""}${highlight.note}\n`, ); downloadText( "highlights.md", `# ${material.title} — Highlights\n\n${sections.join("\n---\n\n")}`, ); } return ( <Modal open={open} onOpenChange={onOpenChange} title="Saved highlights" description={material?.title} > <div className="highlights-list"> {highlights.length ? ( highlights.map((highlight) => ( <div className="highlight-item" key={highlight.id}> <div className="entity-heading"> <button className="text-button" onClick={() => onJump(highlight)} > {highlight.page ? "Page " + highlight.page : "Open passage"} </button> <div className="entity-actions"> {highlight.note && ( <IconButton label="Delete note" onClick={() => onClearNote(highlight)} > <Eraser size={16} /> </IconButton> )} <IconButton label="Delete highlight" onClick={() => onRemove(highlight)} > <Trash size={16} /> </IconButton> </div> </div> <blockquote>{highlight.quote}</blockquote> {highlight.note && ( <div className="article-prose note-prose"> <Markdown content={highlight.note} materialId={material?.id} /> </div> )} <div className="highlight-note-actions"> <button onClick={() => onEditNote(highlight)}> {highlight.note ? "Edit note" : "Add note"} </button> <button onClick={() => onCard({ question: highlight.note || "Explain this passage in your own words.", answer: highlight.quote, quote: highlight.quote, page: highlight.page, }) } > Create review card </button> </div> </div> )) ) : ( <p className="muted"> Select text in the reader and choose Highlight. </p> )} </div> {highlights.length > 0 && ( <div className="form-actions"> <button onClick={exportHighlights}> <DownloadSimple size={17} /> Export highlights </button> </div> )} </Modal> );}