80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Icon } from "@iconify/react";
|
|
|
|
interface InputData {
|
|
id: number;
|
|
value: number;
|
|
name: string;
|
|
uW: boolean;
|
|
uG: boolean;
|
|
oW: boolean;
|
|
oG: boolean;
|
|
}
|
|
|
|
interface XioPmProps {
|
|
title: string;
|
|
data: InputData[];
|
|
onConfigClick: (id: number) => void;
|
|
}
|
|
|
|
const XioPM: React.FC<XioPmProps> = ({ title, data, onConfigClick }) => (
|
|
<div className="border rounded-lg shadow-md p-6 laptop:p-2 laptop:scale-y-90 bg-white">
|
|
<h3 className="text-sm font-semibold mb-1">{title}</h3>
|
|
<table className="w-full h-full text-xs text-left">
|
|
<thead className="bg-gray-100 text-gray-700">
|
|
<tr>
|
|
<th className="px-1 py-1">Eingang</th>
|
|
<th className="px-1 py-1">Wert</th>
|
|
<th className="px-1 py-1">Bezeichnung</th>
|
|
<th className="px-1 py-1 text-center">uW</th>
|
|
<th className="px-1 py-1 text-center">uG</th>
|
|
<th className="px-1 py-1 text-center">oW</th>
|
|
<th className="px-1 py-1 text-center">oG</th>
|
|
<th className="px-1 py-1 text-center">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((input) => (
|
|
<tr key={input.id} className="border-t">
|
|
<td className="px-1 py-1">{input.id}</td>
|
|
<td className="px-1 py-1">{input.value.toFixed(2)}</td>
|
|
<td className="px-1 py-1">{input.name}</td>
|
|
<td className="px-1 py-1 text-center">
|
|
<span className={input.uW ? "text-green-500" : "text-gray-400"}>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-1 py-1 text-center">
|
|
<span className={input.uG ? "text-green-500" : "text-gray-400"}>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-1 py-1 text-center">
|
|
<span className={input.oW ? "text-orange-500" : "text-gray-400"}>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-1 py-1 text-center">
|
|
<span className={input.oG ? "text-green-500" : "text-gray-400"}>
|
|
●
|
|
</span>
|
|
</td>
|
|
<td className="px-1 py-1 text-center">
|
|
<button
|
|
onClick={() => onConfigClick(input.id)}
|
|
className="text-blue-500 hover:text-blue-700"
|
|
>
|
|
<Icon icon="mdi:cog-outline" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
|
|
export default XioPM;
|