Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { ProductSpecifications } from "@/types/product";
export interface SpecificationsTableProps {
specifications?: ProductSpecifications | null;
}
/**
* SpecificationsTable Component
*
* Displays product specifications in a clean two-column table format.
* Specifications are shown as key-value pairs with alternating row colors for readability.
*
* @param specifications - Product specifications object with key-value pairs
*
* @example
* ```tsx
* <SpecificationsTable specifications={{
* "Weight": "150 lbs",
* "Capacity": "6-8 children",
* "Material": "Commercial-grade vinyl"
* }} />
* ```
*/
const SpecificationsTable = ({ specifications }: SpecificationsTableProps) => {
// Don't render if no specifications provided
if (!specifications || Object.keys(specifications).length === 0) {
return null;
}
return (
<div className="mt-8">
<h3 className="text-2xl font-semibold mb-4 text-dark">Specifications</h3>
<div className="border border-gray-3 rounded-lg overflow-hidden">
<table className="w-full">
<tbody>
{Object.entries(specifications).map(([key, value], index) => (
<tr
key={key}
className={index % 2 === 0 ? "bg-gray-1" : "bg-white"}
>
<td className="px-4 py-3 font-medium text-dark border-r border-gray-3 w-1/3">
{key}
</td>
<td className="px-4 py-3 text-body">
{String(value)}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default SpecificationsTable;
|