({
blog,
onClose,
likes,
likedByMe,
bookmarks,
comments,
newComment,
setNewComment,
toggleLike,
toggleBookmark,
copyShareLink,
submitComment,
deleteComment,
})
| 23 | } |
| 24 | |
| 25 | export default function BlogReadModal({ |
| 26 | blog, |
| 27 | onClose, |
| 28 | likes, |
| 29 | likedByMe, |
| 30 | bookmarks, |
| 31 | comments, |
| 32 | newComment, |
| 33 | setNewComment, |
| 34 | toggleLike, |
| 35 | toggleBookmark, |
| 36 | copyShareLink, |
| 37 | submitComment, |
| 38 | deleteComment, |
| 39 | }) { |
| 40 | |
| 41 | const [isMaximized, setIsMaximized] = useState(false); |
| 42 | const toggleMaximize = () => setIsMaximized(prev => !prev); |
| 43 | |
| 44 | if (!blog) return null; |
| 45 | const safeTags = normalizeTags(blog.tags); |
| 46 | |
| 47 | const renderContent = (content) => { |
| 48 | const paragraphs = content.split("\n").filter(p => p.trim()); |
| 49 | |
| 50 | return paragraphs.map((paragraph, index) => { |
| 51 | if (paragraph.includes("```")) { |
| 52 | const codeMatch = paragraph.match(/```(\w+)?\n?([\s\S]*?)```/); |
| 53 | if (codeMatch) { |
| 54 | return ( |
| 55 | <motion.div |
| 56 | key={index} |
| 57 | className="my-6" |
| 58 | initial={{ opacity: 0, x: -20 }} |
| 59 | animate={{ opacity: 1, x: 0 }} |
| 60 | transition={{ delay: 0.9 + index * 0.1 }} |
| 61 | > |
| 62 | <div className="bg-slate-900 dark:bg-slate-950 rounded-xl p-4 border border-slate-700 shadow-lg"> |
| 63 | <div className="flex items-center justify-between mb-3"> |
| 64 | <span className="text-xs font-medium text-slate-400 uppercase tracking-wider"> |
| 65 | {codeMatch[1] || "Code"} |
| 66 | </span> |
| 67 | <button |
| 68 | onClick={() => navigator.clipboard?.writeText(codeMatch[2])} |
| 69 | className="text-xs text-slate-400 hover:text-white transition-colors px-2 py-1 rounded bg-slate-800 hover:bg-slate-700" |
| 70 | > |
| 71 | Copy |
| 72 | </button> |
| 73 | </div> |
| 74 | <pre className="text-sm text-green-400 font-mono overflow-x-auto"> |
| 75 | <code>{codeMatch[2]}</code> |
| 76 | </pre> |
| 77 | </div> |
| 78 | </motion.div> |
| 79 | ); |
| 80 | } |
| 81 | } |
| 82 |
nothing calls this directly
no test coverage detected