Jason Woltje
5291fece26
- Create workspace listing page at /settings/workspaces - List all user workspaces with role badges - Create new workspace functionality - Display member count per workspace - Create workspace detail page at /settings/workspaces/[id] - Workspace settings (name, ID, created date) - Member management with role editing - Invite member functionality - Delete workspace (owner only) - Add workspace components: - WorkspaceCard: Display workspace info with role badge - WorkspaceSettings: Edit workspace settings and delete - MemberList: Display and manage workspace members - InviteMember: Send invitations with role selection - Add WorkspaceMemberWithUser type to shared package - Follow existing app patterns for styling and structure - Use mock data (ready for API integration)
107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
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 function EntryCard({ entry }: EntryCardProps) {
|
|
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) => (
|
|
<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 */}
|
|
<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>
|
|
);
|
|
}
|