main

src/components/content/ContentTable.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { Box, Table, Badge, HStack, IconButton } from "@chakra-ui/react";
+import { LuEye, LuPencil, LuTrash2 } from "react-icons/lu";
+import { toaster } from "@/components/ui/feedback/toaster";
+import { useState } from "react";
+import { ContentPreviewDialog } from "./ContentPreviewDialog";
+
+const MOCK_CONTENT = [
+    { id: 1, title: "The Future of AI in Marketing", platform: "LinkedIn", status: "published", date: "2024-03-10" },
+    { id: 2, title: "5 Tips for Better Sleep", platform: "Twitter", status: "draft", date: "2024-03-12" },
+    { id: 3, title: "Product Launch Announcement", platform: "Instagram", status: "scheduled", date: "2024-03-15" },
+    { id: 4, title: "Weekly Tech Roundup", platform: "LinkedIn", status: "review", date: "2024-03-18" },
+    { id: 5, title: "Customer Success Story", platform: "Blog", status: "draft", date: "2024-03-20" },
+];
+
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case "published": return "green";
+        case "draft": return "gray";
+        case "scheduled": return "blue";
+        case "review": return "orange";
+        default: return "gray";
+    }
+};
+
+export function ContentTable() {
+    const [selectedItem, setSelectedItem] = useState<any>(null);
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+
+    const handleAction = (action: string, item: any) => {
+        if (action === 'View') {
+            setSelectedItem(item);
+            setIsPreviewOpen(true);
+            return;
+        }
+
+        toaster.create({
+            title: `${action} Action`,
+            description: `You clicked ${action} for ${item.title}`,
+            type: "info",
+        });
+    };
+
+    return (
+        <>
+            <Box borderWidth="1px" borderRadius="lg" overflow="hidden" bg="bg.panel">
+                <Table.Root striped>
+                    <Table.Header>
+                        <Table.Row>
+                            <Table.ColumnHeader>Title</Table.ColumnHeader>
+                            <Table.ColumnHeader>Platform</Table.ColumnHeader>
+                            <Table.ColumnHeader>Status</Table.ColumnHeader>
+                            <Table.ColumnHeader>Date</Table.ColumnHeader>
+                            <Table.ColumnHeader textAlign="right">Actions</Table.ColumnHeader>
+                        </Table.Row>
+                    </Table.Header>
+                    <Table.Body>
+                        {MOCK_CONTENT.map((item) => (
+                            <Table.Row key={item.id}>
+                                <Table.Cell fontWeight="medium">{item.title}</Table.Cell>
+                                <Table.Cell>{item.platform}</Table.Cell>
+                                <Table.Cell>
+                                    <Badge colorPalette={getStatusColor(item.status)} variant="solid">
+                                        {item.status}
+                                    </Badge>
+                                </Table.Cell>
+                                <Table.Cell>{item.date}</Table.Cell>
+                                <Table.Cell textAlign="right">
+                                    <HStack justify="flex-end" gap={2}>
+                                        <IconButton
+                                            variant="ghost"
+                                            size="sm"
+                                            aria-label="View"
+                                            onClick={() => handleAction('View', item)}
+                                        >
+                                            <LuEye />
+                                        </IconButton>
+                                        <IconButton
+                                            variant="ghost"
+                                            size="sm"
+                                            aria-label="Edit"
+                                            onClick={() => handleAction('Edit', item)}
+                                        >
+                                            <LuPencil />
+                                        </IconButton>
+                                        <IconButton
+                                            variant="ghost"
+                                            size="sm"
+                                            colorPalette="red"
+                                            aria-label="Delete"
+                                            onClick={() => handleAction('Delete', item)}
+                                        >
+                                            <LuTrash2 />
+                                        </IconButton>
+                                    </HStack>
+                                </Table.Cell>
+                            </Table.Row>
+                        ))}
+                    </Table.Body>
+                </Table.Root>
+            </Box>
+
+            <ContentPreviewDialog
+                item={selectedItem}
+                open={isPreviewOpen}
+                onOpenChange={(e) => setIsPreviewOpen(e.open)}
+            />
+        </>
+    );
+}