improve TableRow component

app/javascript/src/components/Table/TableRow.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import type { FC, ReactNode } from "react";
 import React from "react";
 
@@ -15,12 +16,16 @@ export const TableRow: FC<Props> = ({ items, id, onClick }) => {
   };
 
   return (
-    <tr onClick={handleClick}>
+    <tr
+      onClick={handleClick}
+      className={classNames(
+        "bg-white",
+        onClick &&
+          "bg-white hover:bg-gray-100 cursor-pointer transition duration-500"
+      )}
+    >
       {items?.map((item, index) => (
-        <td
+        <td key={index} className="px-5 py-5 border-b border-gray-200 text-sm">
-          key={index}
-          className="px-5 py-5 border-b border-gray-200 bg-white text-sm"
-        >
           <p className="text-gray-900 whitespace-nowrap">{item}</p>
         </td>
       ))}