Feature/product information

pages/product-information/CartTable.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { IoAddOutline, IoRemoveOutline } from 'react-icons/io5';
+import CustomTable from './CustomTable'; // adjust path as needed
+
+type CartItem = {
+  metal: string;
+  purity: string;
+  tone: string;
+  diamond: string;
+  size: string;
+  quantity: number;
+  total: number;
+};
+
+type CartTableProps = {
+  cart: CartItem[];
+  handleCartQuantityChange: (index: number, change: number) => void;
+};
+
+const CartTable: React.FC<CartTableProps> = ({ cart, handleCartQuantityChange }) => {
+  const headers = ['Metal', 'Purity', 'Tone', 'Diamond', 'Size', 'Quantity', 'Total'];
+
+  const rows: any[][] = cart.map((item, index) => [
+    item.metal,
+    item.purity,
+    item.tone,
+    item.diamond,
+    item.size,
+    // Quantity Control (JSX Element)
+    <div key={index} className="d-flex align-items-center shadow-sm border rounded overflow-hidden">
+      <button
+        className="d-flex align-items-center justify-content-center flex-fill py-2 border-0 bg-transparent"
+        onClick={() => handleCartQuantityChange(index, -1)}
+      >
+        <IoRemoveOutline size={18} />
+      </button>
+      <div className="flex-fill text-center fw-bold py-2 border-start border-end">{item.quantity}</div>
+      <button
+        className="d-flex align-items-center justify-content-center flex-fill py-2 border-0 bg-transparent"
+        onClick={() => handleCartQuantityChange(index, 1)}
+      >
+        <IoAddOutline size={18} />
+      </button>
+    </div>,
+    item.total.toFixed(2),
+  ]);
+  if (cart.length === 0) {
+    rows.push([
+      {
+        content: 'No items in cart',
+        props: {
+          colSpan: 7,
+          className: 'text-center fw-bold px-4',
+        },
+      },
+    ]);
+  }
+
+  return <CustomTable headers={headers} rows={rows} />;
+};
+
+export default CartTable;

pages/product-information/CustomTable.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+type CellContent =
+  | string
+  | number
+  | JSX.Element
+  | { content: string | number | JSX.Element; props?: React.TdHTMLAttributes<HTMLTableCellElement> };
+
+type CustomTableProps = {
+  headers?: string[];
+  rows: CellContent[][];
+};
+
+const CustomTable: React.FC<CustomTableProps> = ({ headers = [], rows }) => {
+  const columnCount = Math.max(...rows.map((row) => row.length), headers.length);
+
+  return (
+    <div className="table-responsive rounded">
+      <table className="table table-sm border border-2 secondary text-center">
+        {headers.length > 0 && (
+          <thead>
+            <tr>
+              {headers.length === 1 && columnCount > 1 ? (
+                <th colSpan={columnCount}>{headers[0]}</th>
+              ) : (
+                headers.map((header, i) => <th key={i}>{header}</th>)
+              )}
+            </tr>
+          </thead>
+        )}
+        <tbody>
+          {rows.map((row, i) => (
+            <tr key={i}>
+              {row.map((cell, j) => {
+                if (typeof cell === 'object' && 'content' in cell) {
+                  return (
+                    <td key={j} {...(cell.props || {})} style={{ border: 'none', ...(cell.props?.style || {}) }}>
+                      {cell.content}
+                    </td>
+                  );
+                } else {
+                  return (
+                    <td key={j} style={{ border: 'none' }}>
+                      {cell}
+                    </td>
+                  );
+                }
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CustomTable;