mirror of
https://github.com/dergigi/boris.git
synced 2025-12-17 06:34:24 +01:00
feat(ui): add ContentPanel component to render readable HTML
- Shows loading/empty states - Renders title and HTML via dangerouslySetInnerHTML - Minimal API for integration
This commit is contained in:
43
src/components/ContentPanel.tsx
Normal file
43
src/components/ContentPanel.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react'
|
||||
|
||||
interface ContentPanelProps {
|
||||
loading: boolean
|
||||
title?: string
|
||||
html?: string
|
||||
selectedUrl?: string
|
||||
}
|
||||
|
||||
const ContentPanel: React.FC<ContentPanelProps> = ({ loading, title, html, selectedUrl }) => {
|
||||
if (!selectedUrl) {
|
||||
return (
|
||||
<div className="content-panel empty">
|
||||
<p>Select a bookmark to preview its content.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="content-panel loading">
|
||||
<p>Loading content…</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="content-panel">
|
||||
{title && <h2 className="content-title">{title}</h2>}
|
||||
{html ? (
|
||||
<div className="content-html" dangerouslySetInnerHTML={{ __html: html }} />
|
||||
) : (
|
||||
<div className="content-panel empty">
|
||||
<p>No readable content found for this URL.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContentPanel
|
||||
|
||||
|
||||
Reference in New Issue
Block a user