70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import { fetchContent, Content as ContentType } from '../../services/api';
|
|
import { Card } from '../../components/ui/card';
|
|
|
|
export default function Content() {
|
|
const toast = useToast();
|
|
const [content, setContent] = useState<ContentType[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedContent, setSelectedContent] = useState<ContentType | null>(null);
|
|
|
|
useEffect(() => {
|
|
loadContent();
|
|
}, []);
|
|
|
|
const loadContent = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await fetchContent();
|
|
setContent(response.results || []);
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load content: ${error.message}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Content" />
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Content</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">View all generated content</p>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading...</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{content.map((item: ContentType) => (
|
|
<Card key={item.id} className="p-6">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Task #{item.task}
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
Generated: {new Date(item.generated_at).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<div className="text-sm text-gray-600 dark:text-gray-400">
|
|
{item.word_count} words
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="prose dark:prose-invert max-w-none"
|
|
dangerouslySetInnerHTML={{ __html: item.html_content }}
|
|
/>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|