clone init

components/ProductTechnicalData.tsx

@@ -0,0 +1,97 @@
+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) {
+  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>
+  );
+}