99 lines
3.8 KiB
TypeScript
99 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
|
|
interface KeyValueItem {
|
|
label: string;
|
|
value: string;
|
|
unit?: string;
|
|
}
|
|
|
|
interface VoltageTable {
|
|
voltageLabel: string;
|
|
metaItems: KeyValueItem[];
|
|
columns: Array<{ key: string; label: string }>;
|
|
rows: Array<{ configuration: string; cells: string[] }>;
|
|
}
|
|
|
|
interface ProductTechnicalDataProps {
|
|
data: {
|
|
technicalItems: KeyValueItem[];
|
|
voltageTables: VoltageTable[];
|
|
};
|
|
}
|
|
|
|
export default function ProductTechnicalData({ data }: ProductTechnicalDataProps) {
|
|
if (!data) return null;
|
|
const { technicalItems = [], voltageTables = [] } = data;
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{technicalItems.length > 0 && (
|
|
<div className="bg-neutral-light p-6 rounded-lg shadow-sm">
|
|
<h3 className="text-xl font-semibold mb-4">General Data</h3>
|
|
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4">
|
|
{technicalItems.map((item, idx) => (
|
|
<div key={idx} className="flex flex-col border-b border-neutral-dark pb-2 last:border-0">
|
|
<dt className="text-sm text-text-secondary">{item.label}</dt>
|
|
<dd className="text-base font-medium text-text-primary">
|
|
{item.value} {item.unit && <span className="text-sm text-text-secondary ml-1">{item.unit}</span>}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
)}
|
|
|
|
{voltageTables.map((table, idx) => (
|
|
<div key={idx} className="bg-neutral-light p-6 rounded-lg shadow-sm overflow-hidden">
|
|
<h3 className="text-xl font-semibold mb-4">
|
|
{table.voltageLabel !== 'Voltage unknown' && table.voltageLabel !== 'Spannung unbekannt'
|
|
? table.voltageLabel
|
|
: 'Technical Specifications'}
|
|
</h3>
|
|
|
|
{table.metaItems.length > 0 && (
|
|
<dl className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-6 bg-neutral p-4 rounded">
|
|
{table.metaItems.map((item, mIdx) => (
|
|
<div key={mIdx}>
|
|
<dt className="text-xs text-text-secondary uppercase tracking-wider">{item.label}</dt>
|
|
<dd className="font-medium">{item.value} {item.unit}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
)}
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-neutral-dark">
|
|
<thead className="bg-neutral">
|
|
<tr>
|
|
<th scope="col" className="px-3 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider sticky left-0 bg-neutral z-10">
|
|
Configuration
|
|
</th>
|
|
{table.columns.map((col, cIdx) => (
|
|
<th key={cIdx} scope="col" className="px-3 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider whitespace-nowrap">
|
|
{col.label}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-neutral-dark">
|
|
{table.rows.map((row, rIdx) => (
|
|
<tr key={rIdx} className="hover:bg-neutral-light transition-colors">
|
|
<td className="px-3 py-3 text-sm font-medium text-text-primary sticky left-0 bg-white z-10 whitespace-nowrap">
|
|
{row.configuration}
|
|
</td>
|
|
{row.cells.map((cell, cellIdx) => (
|
|
<td key={cellIdx} className="px-3 py-3 text-sm text-text-secondary whitespace-nowrap">
|
|
{cell}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|