chandresh
/
BlogEditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Blog editor ui done

This commit is contained in:
chandresh 2026-02-11 22:29:26 +05:30
parent 26a617e1d4
commit d6fa1611d8
2 changed files with 100 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/pages/Dashboard.jsx
View File

@ -133,16 +133,16 @@ export default function Dashboard() {
</Link> </Link>
</div> </div>
) : ( ) : (
<div className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
{posts.map((postGroup) => { {posts.map((postGroup) => {
const post = postGroup.en || postGroup.hi const post = postGroup.en || postGroup.hi
if (!post) return null if (!post) return null
return ( return (
<div key={postGroup.groupId} className="bg-white rounded-lg shadow p-4 sm:p-6"> <div key={postGroup.groupId} className="bg-white rounded-lg shadow p-4 sm:p-6 flex flex-col min-w-0">
{/* Display both language titles */} {/* Display both language titles */}
<div className="mb-3 space-y-2"> <div className="mb-3 space-y-2">
<div className="flex items-start gap-2"> <div className="flex items-start gap-2 min-w-0">
<span className={`px-2 py-1 text-xs rounded font-medium flex-shrink-0 ${ <span className={`px-2 py-1 text-xs rounded font-medium flex-shrink-0 ${
postGroup.en?.status === 'published' postGroup.en?.status === 'published'
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800'
@ -150,11 +150,11 @@ export default function Dashboard() {
}`}> }`}>
EN EN
</span> </span>
<h3 className="text-sm font-semibold text-gray-900 line-clamp-2 flex-1"> <h3 className="text-sm font-semibold text-gray-900 line-clamp-1 flex-1 min-w-0 break-words">
{postGroup.en?.title || 'No English version'} {postGroup.en?.title || 'No English version'}
</h3> </h3>
</div> </div>
<div className="flex items-start gap-2"> <div className="flex items-start gap-2 min-w-0">
<span className={`px-2 py-1 text-xs rounded font-medium flex-shrink-0 ${ <span className={`px-2 py-1 text-xs rounded font-medium flex-shrink-0 ${
postGroup.hi?.status === 'published' postGroup.hi?.status === 'published'
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800'
@ -162,7 +162,7 @@ export default function Dashboard() {
}`}> }`}>
HI HI
</span> </span>
<h3 className="text-sm font-semibold text-gray-900 line-clamp-2 flex-1"> <h3 className="text-sm font-semibold text-gray-900 line-clamp-1 flex-1 min-w-0 break-words">
{postGroup.hi?.title || 'No Hindi version'} {postGroup.hi?.title || 'No Hindi version'}
</h3> </h3>
</div> </div>
@ -170,18 +170,18 @@ export default function Dashboard() {
{/* Status badges */} {/* Status badges */}
<div className="space-y-2 mb-4"> <div className="space-y-2 mb-4">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2 min-w-0">
{post.content_type === 'link' && ( {post.content_type === 'link' && (
<span className="px-2 py-1 text-xs rounded bg-blue-100 text-blue-800 font-medium"> <span className="px-2 py-1 text-xs rounded bg-blue-100 text-blue-800 font-medium flex-shrink-0">
Link Link
</span> </span>
)} )}
{/* Show publish status for each language */} {/* Show publish status for each language */}
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5 flex-shrink-0">
{postGroup.en && ( {postGroup.en && (
<span <span
className={`px-2 py-1 text-xs rounded font-medium ${ className={`px-2 py-1 text-xs rounded font-medium whitespace-nowrap ${
postGroup.en.status === 'published' postGroup.en.status === 'published'
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800'
: 'bg-gray-100 text-gray-600' : 'bg-gray-100 text-gray-600'
@ -193,7 +193,7 @@ export default function Dashboard() {
)} )}
{postGroup.hi && ( {postGroup.hi && (
<span <span
className={`px-2 py-1 text-xs rounded font-medium ${ className={`px-2 py-1 text-xs rounded font-medium whitespace-nowrap ${
postGroup.hi.status === 'published' postGroup.hi.status === 'published'
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800'
: 'bg-gray-100 text-gray-600' : 'bg-gray-100 text-gray-600'
@ -205,45 +205,53 @@ export default function Dashboard() {
)} )}
</div> </div>
<span className="text-xs text-gray-500 ml-auto"> <span className="text-xs text-gray-500 ml-auto flex-shrink-0">
{new Date(post.updated_at).toLocaleDateString()} {new Date(post.updated_at).toLocaleDateString()}
</span> </span>
</div> </div>
{/* Summary status message */} {/* Summary status message */}
<div className="text-xs font-medium"> <div className="text-xs font-medium min-w-0">
{(() => { {(() => {
const enPublished = postGroup.en?.status === 'published' const enPublished = postGroup.en?.status === 'published'
const hiPublished = postGroup.hi?.status === 'published' const hiPublished = postGroup.hi?.status === 'published'
if (enPublished && hiPublished) { if (enPublished && hiPublished) {
return <span className="text-green-700">📱 Published in: <strong>Both Languages</strong></span> return <span className="text-green-700 inline-flex items-center gap-1"><span>📱</span><span className="truncate">Published in: <strong>Both Languages</strong></span></span>
} else if (enPublished) { } else if (enPublished) {
return <span className="text-indigo-700">📱 Published in: <strong>English Only</strong></span> return <span className="text-indigo-700 inline-flex items-center gap-1"><span>📱</span><span className="truncate">Published in: <strong>English Only</strong></span></span>
} else if (hiPublished) { } else if (hiPublished) {
return <span className="text-amber-700">📱 Published in: <strong>Hindi Only</strong></span> return <span className="text-amber-700 inline-flex items-center gap-1"><span>📱</span><span className="truncate">Published in: <strong>Hindi Only</strong></span></span>
} else { } else {
return <span className="text-gray-600">📝 Draft - Not Published</span> return <span className="text-gray-600 inline-flex items-center gap-1"><span>📝</span><span className="truncate">Draft - Not Published</span></span>
} }
})()} })()}
</div> </div>
</div> </div>
{/* Action buttons */} {/* Action buttons */}
<div className="flex flex-wrap gap-2"> <div className="space-y-2">
{/* Row 1: Edit button (full width) */}
<Link <Link
to={`/editor/${postGroup.groupId}`} to={`/editor/${postGroup.groupId}`}
className="flex-1 min-w-[calc(50%-4px)] sm:min-w-0 text-center bg-indigo-600 text-white px-3 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium" className="block w-full text-center bg-indigo-600 text-white px-3 py-2 rounded-md hover:bg-indigo-700 text-sm font-medium"
> >
Edit Edit
</Link> </Link>
{post.status === 'published' && postGroup.en && (
{/* Row 2: View buttons (side by side if both exist) */}
{(postGroup.en?.status === 'published' || postGroup.hi?.status === 'published') && (
<div className="grid grid-cols-2 gap-2">
{/* View EN button - only show if English is published */}
{postGroup.en?.status === 'published' && (
post.content_type === 'link' && postGroup.en.external_url ? ( post.content_type === 'link' && postGroup.en.external_url ? (
<a <a
href={postGroup.en.external_url} href={postGroup.en.external_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex-1 min-w-[calc(50%-4px)] sm:min-w-0 text-center bg-gray-200 text-gray-700 px-3 py-2 rounded-md hover:bg-gray-300 text-sm" className={`text-center bg-indigo-100 text-indigo-700 px-3 py-2 rounded-md hover:bg-indigo-200 text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis ${
!postGroup.hi || postGroup.hi.status !== 'published' ? 'col-span-2' : ''
}`}
> >
View EN View EN
</a> </a>
@ -251,26 +259,60 @@ export default function Dashboard() {
<Link <Link
to={`/blog/${postGroup.en.slug}`} to={`/blog/${postGroup.en.slug}`}
target="_blank" target="_blank"
className="flex-1 min-w-[calc(50%-4px)] sm:min-w-0 text-center bg-gray-200 text-gray-700 px-3 py-2 rounded-md hover:bg-gray-300 text-sm" className={`text-center bg-indigo-100 text-indigo-700 px-3 py-2 rounded-md hover:bg-indigo-200 text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis ${
!postGroup.hi || postGroup.hi.status !== 'published' ? 'col-span-2' : ''
}`}
> >
View EN View EN
</Link> </Link>
) )
)} )}
{/* View HI button - only show if Hindi is published */}
{postGroup.hi?.status === 'published' && (
post.content_type === 'link' && postGroup.hi.external_url ? (
<a
href={postGroup.hi.external_url}
target="_blank"
rel="noopener noreferrer"
className={`text-center bg-green-100 text-green-700 px-3 py-2 rounded-md hover:bg-green-200 text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis ${
!postGroup.en || postGroup.en.status !== 'published' ? 'col-span-2' : ''
}`}
>
View HI
</a>
) : (
<Link
to={`/blog/${postGroup.hi.slug}`}
target="_blank"
className={`text-center bg-green-100 text-green-700 px-3 py-2 rounded-md hover:bg-green-200 text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis ${
!postGroup.en || postGroup.en.status !== 'published' ? 'col-span-2' : ''
}`}
>
View HI
</Link>
)
)}
</div>
)}
{/* Row 3: Publish and Delete buttons (side by side) */}
<div className="grid grid-cols-2 gap-2">
<button <button
onClick={() => handlePublish(postGroup)} onClick={() => handlePublish(postGroup)}
className="flex-1 min-w-[calc(50%-4px)] sm:min-w-0 px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm" className="px-3 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis"
> >
{post.status === 'published' ? 'Unpublish' : 'Publish'} {post.status === 'published' ? 'Unpublish' : 'Publish'}
</button> </button>
<button <button
onClick={() => handleDelete(postGroup.groupId, postGroup.en?.id, postGroup.hi?.id)} onClick={() => handleDelete(postGroup.groupId, postGroup.en?.id, postGroup.hi?.id)}
className="flex-1 min-w-[calc(50%-4px)] sm:min-w-0 px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 text-sm" className="px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 text-sm font-medium whitespace-nowrap overflow-hidden text-ellipsis"
> >
Delete Delete
</button> </button>
</div> </div>
</div> </div>
</div>
) )
})} })}
</div> </div>

12
frontend/src/pages/Editor.jsx
View File

@ -691,9 +691,10 @@ export default function EditorPage() {
)} )}
</div> </div>
{/* Always show dual-language layout - all content preserved */} {/* Conditional language layout based on publish mode */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div className={`grid gap-4 ${publishMode === 'both' ? 'grid-cols-1 lg:grid-cols-2' : 'grid-cols-1'}`}>
{/* English Section */} {/* English Section - only show if publishMode is 'en' or 'both' */}
{(publishMode === 'en' || publishMode === 'both') && (
<div className={`bg-white rounded-xl shadow-sm border-2 overflow-visible ${ <div className={`bg-white rounded-xl shadow-sm border-2 overflow-visible ${
publishMode === 'en' || publishMode === 'both' publishMode === 'en' || publishMode === 'both'
? 'border-indigo-500 ring-2 ring-indigo-200' ? 'border-indigo-500 ring-2 ring-indigo-200'
@ -773,8 +774,10 @@ export default function EditorPage() {
)} )}
</div> </div>
</div> </div>
)}
{/* Hindi Section */} {/* Hindi Section - only show if publishMode is 'hi' or 'both' */}
{(publishMode === 'hi' || publishMode === 'both') && (
<div className={`bg-white rounded-xl shadow-sm border-2 overflow-visible ${ <div className={`bg-white rounded-xl shadow-sm border-2 overflow-visible ${
publishMode === 'hi' || publishMode === 'both' publishMode === 'hi' || publishMode === 'both'
? 'border-green-500 ring-2 ring-green-200' ? 'border-green-500 ring-2 ring-green-200'
@ -854,6 +857,7 @@ export default function EditorPage() {
)} )}
</div> </div>
</div> </div>
)}
</div> </div>
</div> </div>
</main> </main>