Add a preview option to see scheduled and historical posts

Integrate an "Eye" icon in the calendar and history views to allow users to preview posts, along with a modal for displaying the preview content.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/XaovM3F
This commit is contained in:
michaelschal committed 2025-10-09 14:51:30 +00:00
1 parent a0cddc9df7
commit 35869603d6
3 files changed
+208 -70

No files matched your search

+39 -26
View File
@@ -1,6 +1,6 @@
import { format, isSameDay, parseISO } from "date-fns";
import { fr } from "date-fns/locale";
import { Edit, Trash2, ChevronDown, ChevronUp } from "lucide-react";
import { Edit, Trash2, ChevronDown, ChevronUp, Eye } from "lucide-react";
import { SiFacebook, SiInstagram } from "react-icons/si";
import { Button } from "@/components/ui/button";
import { useState } from "react";
@@ -9,9 +9,10 @@ interface CalendarListViewProps {
scheduledPosts: any[];
onEditPost: (post: any) => void;
onDeletePost: (postId: string) => void;
onPreviewPost: (post: any) => void;
}
export default function CalendarListView({ scheduledPosts, onEditPost, onDeletePost }: CalendarListViewProps) {
export default function CalendarListView({ scheduledPosts, onEditPost, onDeletePost, onPreviewPost }: CalendarListViewProps) {
const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set());
// Group posts by date
@@ -129,30 +130,42 @@ export default function CalendarListView({ scheduledPosts, onEditPost, onDeleteP
</div>
</div>
{isPending && (
<div className="flex gap-2">
<Button
variant="ghost"
size="sm"
onClick={() => onEditPost(post)}
className="h-11 w-11 p-0"
data-testid={`button-edit-post-${post.id}`}
title="Modifier"
>
<Edit className="w-5 h-5 text-blue-500" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => onDeletePost(post.id)}
className="h-11 w-11 p-0"
data-testid={`button-delete-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-5 h-5 text-red-500" />
</Button>
</div>
)}
<div className="flex gap-2">
<Button
variant="ghost"
size="sm"
onClick={() => onPreviewPost(post)}
className="h-11 w-11 p-0"
data-testid={`button-preview-post-${post.id}`}
title="Prévisualiser"
>
<Eye className={`w-5 h-5 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
</Button>
{isPending && (
<>
<Button
variant="ghost"
size="sm"
onClick={() => onEditPost(post)}
className="h-11 w-11 p-0"
data-testid={`button-edit-post-${post.id}`}
title="Modifier"
>
<Edit className="w-5 h-5 text-blue-500" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => onDeletePost(post.id)}
className="h-11 w-11 p-0"
data-testid={`button-delete-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-5 h-5 text-red-500" />
</Button>
</>
)}
</div>
</div>
</div>
);