214139f4d5
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Wrap 7 list-item/card components with React.memo to prevent unnecessary re-renders when parent components update but props remain unchanged: - TaskItem (task lists) - EventCard (calendar views) - EntryCard (knowledge base) - WorkspaceCard (workspace list) - TeamCard (team list) - DomainItem (domain list) - ConnectionCard (federation connections) All are pure components rendered inside .map() loops that depend solely on their props for rendering output. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
114 lines
3.5 KiB
TypeScript
114 lines
3.5 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
|
|
import React from "react";
|
|
import type { KnowledgeEntryWithTags } from "@mosaic/shared";
|
|
import { EntryStatus } from "@mosaic/shared";
|
|
import Link from "next/link";
|
|
import { FileText, Eye, Users, Lock } from "lucide-react";
|
|
|
|
interface EntryCardProps {
|
|
entry: KnowledgeEntryWithTags;
|
|
}
|
|
|
|
const statusConfig = {
|
|
[EntryStatus.DRAFT]: {
|
|
label: "Draft",
|
|
className: "bg-gray-100 text-gray-700",
|
|
icon: "📝",
|
|
},
|
|
[EntryStatus.PUBLISHED]: {
|
|
label: "Published",
|
|
className: "bg-green-100 text-green-700",
|
|
icon: "✅",
|
|
},
|
|
[EntryStatus.ARCHIVED]: {
|
|
label: "Archived",
|
|
className: "bg-amber-100 text-amber-700",
|
|
icon: "📦",
|
|
},
|
|
};
|
|
|
|
const visibilityIcons = {
|
|
PRIVATE: <Lock className="w-3 h-3" />,
|
|
WORKSPACE: <Users className="w-3 h-3" />,
|
|
PUBLIC: <Eye className="w-3 h-3" />,
|
|
};
|
|
|
|
export const EntryCard = React.memo(function EntryCard({
|
|
entry,
|
|
}: EntryCardProps): React.JSX.Element {
|
|
const statusInfo = statusConfig[entry.status];
|
|
const visibilityIcon = visibilityIcons[entry.visibility];
|
|
|
|
return (
|
|
<Link
|
|
href={`/knowledge/${entry.slug}`}
|
|
className="block bg-white p-5 rounded-lg shadow-sm border border-gray-200 hover:shadow-md hover:border-blue-300 transition-all"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 mt-1">
|
|
<FileText className="w-5 h-5 text-gray-400" />
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
{/* Title */}
|
|
<h3 className="font-semibold text-gray-900 mb-2 text-lg hover:text-blue-600 transition-colors">
|
|
{entry.title}
|
|
</h3>
|
|
|
|
{/* Summary */}
|
|
{entry.summary && (
|
|
<p className="text-sm text-gray-600 mb-3 line-clamp-2">{entry.summary}</p>
|
|
)}
|
|
|
|
{/* Tags */}
|
|
{entry.tags && entry.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 mb-3">
|
|
{entry.tags.map((tag: { id: string; name: string; color: string | null }) => (
|
|
<span
|
|
key={tag.id}
|
|
className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
|
|
style={{
|
|
backgroundColor: tag.color ? `${tag.color}20` : "#E5E7EB",
|
|
color: tag.color ?? "#6B7280",
|
|
}}
|
|
>
|
|
{tag.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Metadata row */}
|
|
<div className="flex flex-wrap items-center gap-3 text-xs text-gray-500">
|
|
{/* Status */}
|
|
{statusInfo && (
|
|
<span
|
|
className={`inline-flex items-center gap-1 px-2 py-1 rounded-full ${statusInfo.className}`}
|
|
>
|
|
<span>{statusInfo.icon}</span>
|
|
<span>{statusInfo.label}</span>
|
|
</span>
|
|
)}
|
|
|
|
{/* Visibility */}
|
|
<span className="inline-flex items-center gap-1">
|
|
{visibilityIcon}
|
|
<span className="capitalize">{entry.visibility.toLowerCase()}</span>
|
|
</span>
|
|
|
|
{/* Updated date */}
|
|
<span>
|
|
Updated{" "}
|
|
{new Date(entry.updatedAt).toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
});
|