87 lines
4.1 KiB
TypeScript
87 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Document } from '@/lib/api-docs';
|
|
import {
|
|
DocumentTextIcon,
|
|
PencilSquareIcon,
|
|
TrashIcon,
|
|
CalendarIcon
|
|
} from "@heroicons/react/24/outline";
|
|
import { format, parseISO } from 'date-fns';
|
|
import { ptBR } from 'date-fns/locale';
|
|
import { Card } from "@/components/ui";
|
|
|
|
interface DocumentListProps {
|
|
documents: Document[];
|
|
onEdit: (doc: Document) => void;
|
|
onDelete: (id: string) => void;
|
|
}
|
|
|
|
export default function DocumentList({ documents, onEdit, onDelete }: DocumentListProps) {
|
|
if (documents.length === 0) {
|
|
return (
|
|
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-12 text-center">
|
|
<DocumentTextIcon className="w-12 h-12 text-zinc-300 mx-auto mb-4" />
|
|
<h3 className="text-lg font-bold text-zinc-900 dark:text-white">Nenhum documento ainda</h3>
|
|
<p className="text-zinc-500 max-w-xs mx-auto mt-2">
|
|
Comece criando seu primeiro documento de texto para sua agência.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{documents.map((doc) => (
|
|
<Card
|
|
key={doc.id}
|
|
className="group hover:shadow-xl transition-all border-2 border-transparent hover:border-brand-500/20"
|
|
>
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div className="p-3 bg-brand-50 dark:bg-brand-500/10 rounded-xl">
|
|
<DocumentTextIcon className="w-6 h-6 text-brand-600 dark:text-brand-400" />
|
|
</div>
|
|
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-all">
|
|
<button
|
|
onClick={() => onEdit(doc)}
|
|
className="p-2 text-zinc-400 hover:text-brand-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
|
>
|
|
<PencilSquareIcon className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => onDelete(doc.id)}
|
|
className="p-2 text-zinc-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 rounded-lg transition-colors"
|
|
>
|
|
<TrashIcon className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-base font-bold text-zinc-900 dark:text-white mb-2 line-clamp-1">
|
|
{doc.title || 'Documento sem título'}
|
|
</h3>
|
|
|
|
<p className="text-sm text-zinc-500 line-clamp-3 mb-6 flex-1">
|
|
{doc.content ? doc.content.replace(/<[^>]*>/g, '').substring(0, 150) : 'Sem conteúdo...'}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-2 pt-4 border-t border-zinc-100 dark:border-zinc-800">
|
|
<CalendarIcon className="w-3.5 h-3.5 text-zinc-400" />
|
|
<span className="text-[10px] font-bold text-zinc-400 uppercase tracking-wider">
|
|
{format(parseISO(doc.updated_at), "dd 'de' MMMM", { locale: ptBR })}
|
|
</span>
|
|
{doc.status === 'draft' && (
|
|
<span className="ml-auto text-[10px] font-black uppercase tracking-widest text-amber-500 bg-amber-50 dark:bg-amber-500/10 px-2 py-0.5 rounded-full">
|
|
Rascunho
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|