45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
/* eslint-disable react/prop-types */
|
|
import { FaCheckCircle, FaTimesCircle } from "react-icons/fa";
|
|
|
|
const AppDevice = ({ devices, theme }) => {
|
|
return (
|
|
<div className={`device-table-container ${theme}`}>
|
|
{/* Header */}
|
|
<div className="device-table-header">
|
|
<div className="header-item">IP Address</div>
|
|
<div className="header-item">Device Name</div>
|
|
<div className="header-item">Status</div>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="device-table-body">
|
|
{devices.map((device) => (
|
|
<div className="device-table-row" key={device.id}>
|
|
<div className="row-item">{device.ip}</div>
|
|
<div className="row-item">{device.name}</div>
|
|
<div
|
|
className={`row-item status ${
|
|
device.is_online === "Online" ? "online" : "offline"
|
|
}`}
|
|
>
|
|
{device.is_online === "Online" ? (
|
|
<>
|
|
<FaCheckCircle className="me-2" />
|
|
Online
|
|
</>
|
|
) : (
|
|
<>
|
|
<FaTimesCircle className="me-2" />
|
|
Offline
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AppDevice;
|