63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { weightStandardData } from '../mockData/weightStandardData.ts';
|
|
|
|
const WeightStandardPage: React.FC = () => {
|
|
const { headers, data } = weightStandardData;
|
|
|
|
return (
|
|
<main className="px-4 sm:px-6 lg:px-8 pb-8">
|
|
<div className="flex items-center mb-6">
|
|
<i className="fa-solid fa-table-list text-3xl text-red-600 mr-4"></i>
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-800">Tabel Standar Bobot Ross 308</h1>
|
|
<p className="mt-1 text-gray-600">
|
|
Driven from pen trial data - so difference may be more
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white p-4 rounded-xl shadow-sm overflow-hidden">
|
|
<div className="overflow-auto max-h-[calc(100vh-250px)]">
|
|
<table className="min-w-full border-collapse text-sm">
|
|
<thead className="bg-red-700 text-white sticky top-0 z-10">
|
|
<tr>
|
|
<th className="p-2 border border-red-800 font-semibold sticky left-0 bg-red-700 z-20">
|
|
DO/wt
|
|
</th>
|
|
{headers.map((header) => (
|
|
<th key={header} className="p-2 border border-red-800 font-semibold w-16">
|
|
{header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((row, rowIndex) => (
|
|
<tr key={rowIndex} className="even:bg-red-100/50">
|
|
<td className="p-1 border border-red-200 text-center bg-red-700 text-white font-semibold sticky left-0 z-10">
|
|
{row.day}
|
|
</td>
|
|
{row.values.map((value, colIndex) => {
|
|
const isRedText = (colIndex + 1) % 7 === 0;
|
|
return (
|
|
<td
|
|
key={colIndex}
|
|
className={`p-1 border border-red-200 text-center font-mono ${isRedText ? 'text-red-600 font-bold' : 'text-gray-800'}`}
|
|
>
|
|
{value}
|
|
</td>
|
|
);
|
|
})}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="text-right mt-2 text-xs text-gray-500 font-semibold">AVIAGEN PROPRIETARY</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default WeightStandardPage;
|