2024-10-07 08:38:03 -05:00
|
|
|
import React from "react";
|
|
|
|
import { Document } from "../DocumentProcessor";
|
|
|
|
|
|
|
|
interface DocumentCardProps {
|
|
|
|
document: Document;
|
|
|
|
}
|
|
|
|
|
|
|
|
const DocumentCard: React.FC<DocumentCardProps> = ({ document }) => (
|
2024-10-07 14:38:34 -05:00
|
|
|
<div className="bg-white shadow-lg shadow-blue-500/50 rounded-md p-4 relative group overflow-hidden">
|
2024-10-07 08:38:03 -05:00
|
|
|
<h3 className="text-lg font-semibold text-gray-800">{document.title}</h3>
|
|
|
|
<p className="text-sm text-gray-600 mt-2 truncate">
|
|
|
|
{document.content.length > 100
|
|
|
|
? `${document.content.substring(0, 100)}...`
|
|
|
|
: document.content}
|
|
|
|
</p>
|
|
|
|
<div className="mt-4">
|
|
|
|
{document.tags.map((tag) => (
|
|
|
|
<span
|
|
|
|
key={tag}
|
|
|
|
className="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full"
|
|
|
|
>
|
|
|
|
{tag}
|
|
|
|
</span>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
<div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-4 rounded-md">
|
|
|
|
<div className="text-sm text-white p-2 bg-gray-800 rounded-md w-full max-h-full overflow-y-auto">
|
|
|
|
<h3 className="text-lg font-semibold text-white">{document.title}</h3>
|
|
|
|
<p className="mt-2 whitespace-pre-wrap">{document.content}</p>
|
|
|
|
<div className="mt-4">
|
|
|
|
{document.tags.map((tag) => (
|
|
|
|
<span
|
|
|
|
key={tag}
|
|
|
|
className="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full"
|
|
|
|
>
|
|
|
|
{tag}
|
|
|
|
</span>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default DocumentCard;
|