import React, { useState } from 'react';
const ICUPatientTable = () => {
const [data, setData] = useState([
['Serial Number', 'Name', 'Age/Sex', 'Diagnosis', 'Time of Stay in ICU',
'Ventilator History', 'Conjunctiva', 'Cornea', 'Swab Results', 'Treatment
Prescribed'],
['1', 'Rajesh Sharma', '38/M', 'ARDS', '14 days', 'Day 1-12: Invasive',
'Hyperemic', 'Dry Eye', 'Positive - Klebsiella sp.', 'Artificial tears q2h'],
['2', 'Priya Patel', '55/F', 'Septic Shock', '8 days', 'Day 1-7: Invasive',
'Hyperemic', 'Dry Eye, Lagophthalmos', 'Negative', 'Lubricating ointment q4h, Lid
taping'],
['3', 'Vikram Singh', '27/M', 'Polytrauma', '21 days', 'Day 1-18: Invasive',
'Chemosis', 'Dry Eye, SPK', 'Positive - Klebsiella sp.', 'Moxifloxacin eye drops
q4h, Artificial tears q2h'],
['4', 'Sanjay Gupta', '61/M', 'COVID-19 Pneumonia', '17 days', 'Day 1-15:
Invasive', 'Chemosis', 'Lagophthalmos', 'Negative', 'Lid taping, Lubricating
ointment q6h'],
['5', 'Deepika Reddy', '49/F', 'Diabetic Ketoacidosis', '5 days', 'None',
'Normal', 'Dry Eye', 'Negative', 'Artificial tears q4h'],
['6', 'Arjun Malhotra', '32/M', 'Meningitis', '12 days', 'Day 1-10: Invasive',
'Hyperemic', 'Dry Eye, Lagophthalmos', 'Positive - Klebsiella sp.', 'Lubricating
ointment q4h, Lid taping'],
['7', 'Nikhil Desai', '52/M', 'Acute Pancreatitis', '9 days', 'Day 1-6:
Invasive', 'Chemosis', 'Dry Eye', 'Negative', 'Artificial tears q3h'],
['8', 'Anjali Verma', '26/F', 'Status Epilepticus', '7 days', 'Day 1-5:
Invasive', 'Normal', 'Normal', 'Negative', 'Ocular lubricants PRN'],
['9', 'Kabir Mehra', '45/M', 'Post-Cardiac Arrest', '19 days', 'Day 1-17:
Invasive', 'Hyperemic', 'Microbial Keratitis', 'Positive - Klebsiella sp.',
'Fortified Tobramycin drops q1h, Fortified Cefazolin drops q1h, Atropine eye drops
BID'],
['10', 'Rohit Choudhury', '29/M', 'Acute Liver Failure', '11 days', 'Day 1-9:
Invasive', 'Icteric', 'Dry Eye, SPK', 'Negative', 'Moxifloxacin eye drops q4h,
Artificial tears q2h']
]);
const renderCell = (value, rowIndex, colIndex) => {
return (
<td
key={`cell-${rowIndex}-${colIndex}`}
className={`border border-gray-300 p-2 ${rowIndex === 0 ? 'bg-gray-100
font-medium text-center' : ''} ${colIndex === 0 ? 'bg-gray-50' : ''}`}
style={{
minWidth: colIndex === 9 ? '200px' : colIndex === 3 || colIndex === 5 ?
'150px' : '100px',
maxWidth: colIndex === 9 ? '250px' : '150px'
}}
>
{value}
</td>
);
};
return (
<div className="flex flex-col items-center w-full">
<div className="overflow-x-auto w-full max-w-6xl shadow-md rounded-lg">
<table className="w-full border-collapse bg-white">
<tbody>
{[Link]((row, rowIndex) => (
<tr key={`row-${rowIndex}`}>
{[Link]((cell, colIndex) => renderCell(cell, rowIndex, colIndex))}
</tr>
))}
</tbody>
</table>
</div>
<div className="mt-4 text-sm text-gray-500">
ICU Patient Record Sheet
</div>
</div>
);
};
export default ICUPatientTable;
