@@ -19,7 +19,9 @@ const ProblemTable = ({
1919
2020 const filteredProblems = problems . filter ( ( problem ) => {
2121 const categoryMatch =
22- filterCategory === "All" || problem . category === filterCategory ;
22+ filterCategory === "All" ||
23+ ( problem . topics || [ ] ) . includes ( filterCategory ) ;
24+
2325 const difficultyMatch =
2426 filterDifficulty === "All" || problem . difficulty === filterDifficulty ;
2527
@@ -66,7 +68,7 @@ const ProblemTable = ({
6668 Name
6769 </ th >
6870 < th className = "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider" >
69- Category
71+ Category/Topic
7072 </ th >
7173 < th className = "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider" >
7274 Difficulty
@@ -83,16 +85,16 @@ const ProblemTable = ({
8385 </ tr >
8486 </ thead >
8587 < tbody className = "bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" >
86- { filteredProblems . map ( ( problem ) => {
88+ { filteredProblems . map ( ( problem , index ) => {
8789 const prob = progress [ problem . id ] || { } ;
8890 const nextReviews = calculateNextReviews ( prob . solvedDate ) ;
8991 return (
9092 < tr
91- key = { problem . id }
93+ key = { index . id }
9294 className = "hover:bg-gray-50 dark:hover:bg-gray-700"
9395 >
9496 < td className = "px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" >
95- { problem . id }
97+ { index + 1 }
9698 </ td >
9799 < td className = "px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" >
98100 < div className = "flex items-center gap-2" >
@@ -103,14 +105,27 @@ const ProblemTable = ({
103105 className = "text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline flex items-center gap-1"
104106 title = { `Open ${ problem . name } on NeetCode` }
105107 >
106- { problem . name }
108+ { problem . title }
107109 < ExternalLink size = { 14 } className = "flex-shrink-0" />
108110 </ a >
109111 </ div >
110112 </ td >
113+ { /* <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
114+ {(problem.topics || []).join(", ")}
115+ </td> */ }
111116 < td className = "px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" >
112- { problem . category }
117+ < div className = "flex flex-wrap gap-2" >
118+ { ( problem . topics || [ ] ) . map ( ( t , idx ) => (
119+ < span
120+ key = { idx }
121+ className = "px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 rounded"
122+ >
123+ { t }
124+ </ span >
125+ ) ) }
126+ </ div >
113127 </ td >
128+
114129 < td
115130 className = { `px-6 py-4 whitespace-nowrap text-sm font-semibold ${
116131 difficultyColor [ problem . difficulty ]
0 commit comments