Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | 'use client'; /** * ArticleList - Table display of support articles */ import React from 'react'; import Link from 'next/link'; import { SupportArticle } from '@/types/support'; import { Icon } from '@/components/ui/icons'; export interface ArticleListProps { /** List of articles */ articles: SupportArticle[]; /** Loading state */ loading: boolean; /** Delete handler */ onDelete: (id: string) => void; } export default function ArticleList({ articles, loading, onDelete }: ArticleListProps) { if (loading) { return ( <div className="bg-white rounded-lg border border-gray-200 p-8 text-center"> <div className="animate-spin h-8 w-8 border-4 border-blue-600 border-t-transparent rounded-full mx-auto" /> <p className="text-gray-500 mt-4">Loading articles...</p> </div> ); } if (!articles || articles.length === 0) { return ( <div className="bg-white rounded-lg border border-gray-200 p-8 text-center"> <Icon name="document" size={48} className="text-gray-400 mx-auto mb-4" /> <p className="text-gray-500">No articles found</p> <Link href="/admin/support/articles/new" className="inline-block mt-4 text-blue-600 hover:text-blue-700" > Create your first article </Link> </div> ); } return ( <div className="bg-white rounded-lg border border-gray-200 overflow-hidden"> <div className="overflow-x-auto"> <table className="min-w-full divide-y divide-gray-200"> <thead className="bg-gray-50"> <tr> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Title </th> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Category </th> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Status </th> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Views </th> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Helpful </th> <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> Updated </th> <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> Actions </th> </tr> </thead> <tbody className="bg-white divide-y divide-gray-200"> {articles.map((article) => ( <tr key={article.id} className="hover:bg-gray-50"> <td className="px-4 py-3"> <Link href={`/admin/support/articles/${article.id}`} className="text-gray-900 font-medium hover:text-blue-600" > {article.title} </Link> <p className="text-sm text-gray-500 truncate max-w-xs"> {article.summary} </p> </td> <td className="px-4 py-3"> <span className="inline-block px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-700 rounded"> {article.category} </span> </td> <td className="px-4 py-3"> <span className={`inline-block px-2 py-0.5 text-xs font-medium rounded ${ article.isPublished ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }`}> {article.isPublished ? 'Published' : 'Draft'} </span> </td> <td className="px-4 py-3 text-sm text-gray-500"> {article.viewCount} </td> <td className="px-4 py-3 text-sm text-gray-500"> {article.helpfulCount} </td> <td className="px-4 py-3 text-sm text-gray-500"> {new Date(article.updatedAt).toLocaleDateString()} </td> <td className="px-4 py-3 text-right"> <div className="flex items-center justify-end gap-2"> <Link href={`/support/articles/${article.slug}`} target="_blank" className="p-1 text-gray-400 hover:text-gray-600" title="View" > <Icon name="eye" size={20} /> </Link> <Link href={`/admin/support/articles/${article.id}/edit`} className="p-1 text-gray-400 hover:text-blue-600" title="Edit" > <Icon name="edit" size={20} /> </Link> <button type="button" onClick={() => onDelete(article.id)} className="p-1 text-gray-400 hover:text-red-600" title="Delete" > <Icon name="trash" size={20} /> </button> </div> </td> </tr> ))} </tbody> </table> </div> </div> ); } |