function MainComponent() { const [selectedRow, setSelectedRow] = React.useState(null); const handleRowSelection = (rowIndex)=>{ setSelectedRow(rowIndex); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[80%] max-w-[1000px] mx-auto bg-white shadow-lg rounded-md overflow-hidden", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-[#4B5563] text-white", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "font-roboto p-4 text-left", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, "Column 1"), /*#__PURE__*/ React.createElement("th", { className: "font-roboto p-4 text-left", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, "Column 2"), /*#__PURE__*/ React.createElement("th", { className: "font-roboto p-4 text-left", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, "Column 3"), /*#__PURE__*/ React.createElement("th", { className: "font-roboto p-4 text-left", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "Actions", /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 justify-end", __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-sm bg-transparent p-2 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 18, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-share", __source: { fileName: "", lineNumber: 19, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-sm bg-transparent p-2 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 21, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-reply", __source: { fileName: "", lineNumber: 22, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-sm bg-transparent p-2 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 24, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-archive", __source: { fileName: "", lineNumber: 25, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, [ 'Row 1', 'Row 2' ].map((rowContent, index)=>/*#__PURE__*/ React.createElement("tr", { key: rowContent, className: `${selectedRow === index ? 'bg-[#60A5FA]' : index % 2 === 0 ? 'bg-white' : 'bg-gray-50'} border-b`, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, `${rowContent}, Cell 1`), /*#__PURE__*/ React.createElement("td", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, `${rowContent}, Cell 2`), /*#__PURE__*/ React.createElement("td", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, `${rowContent}, Cell 3`), /*#__PURE__*/ React.createElement("td", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 justify-end", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRowSelection(index), className: "text-sm bg-transparent p-2 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-envelope-open-text", __source: { fileName: "", lineNumber: 52, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-sm bg-transparent p-2 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 54, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-share", __source: { fileName: "", lineNumber: 55, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-sm bg-transparent p-2 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 57, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-reply", __source: { fileName: "", lineNumber: 58, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-sm bg-transparent p-2 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-archive", __source: { fileName: "", lineNumber: 61, columnNumber: 23 }, __self: this })))))))))); }

Column 1	Column 2	Column 3	Actions
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3