51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { getDirectusClient, readItems } from '@/lib/directus/client';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Pages as Page } from '@/lib/schemas';
|
|
|
|
export default function PageList() {
|
|
const [pages, setPages] = useState<Page[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
try {
|
|
const client = getDirectusClient();
|
|
// @ts-ignore
|
|
const data = await client.request(readItems('pages', { fields: ['*', 'site.name'] }));
|
|
setPages(data as unknown as Page[]);
|
|
} catch (e) { console.error(e); }
|
|
finally { setLoading(false); }
|
|
}
|
|
load();
|
|
}, []);
|
|
|
|
if (loading) return <div>Loading...</div>;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{pages.map(page => (
|
|
<Card key={page.id} className="bg-slate-800 border-slate-700 hover:bg-slate-800/80 transition-colors cursor-pointer">
|
|
<CardHeader className="p-4 flex flex-row items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-lg font-medium text-slate-200">{page.title}</CardTitle>
|
|
<div className="text-sm text-slate-500 font-mono mt-1">/{page.slug}</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Badge variant="outline" className="text-slate-400 border-slate-600">
|
|
{/* @ts-ignore */}
|
|
{page.site?.name || 'Unknown Site'}
|
|
</Badge>
|
|
<Badge variant={page.status === 'published' ? 'default' : 'secondary'}>
|
|
{page.status}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
{pages.length === 0 && <div className="text-center text-slate-500 py-10">No pages found.</div>}
|
|
</div>
|
|
);
|
|
}
|