init

frontend/components/table.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { deleteVorlageFlaechendruck } from "./action";
+
+export default function Table({
+  data,
+}: {
+  data: {
+    id: number;
+    printer: string;
+    product_type: string;
+    height: number;
+    width: number;
+    coordinates: {
+      x: number;
+      y: number;
+      rotation: number;
+    }[];
+  }[];
+}) {
+  async function onDelete(id: number) {
+    try {
+      await deleteVorlageFlaechendruck(id);
+
+      window.location.reload();
+    } catch (error) {
+      console.error(error);
+      alert("An error occurred while deleting the item.");
+    }
+  }
+  return (
+    <div className="p-6 bg-gray-50 min-h-screen">
+      <div className="overflow-x-auto">
+        <table className="table-auto border-collapse border border-gray-300 w-full bg-white shadow-md rounded-lg">
+          <thead>
+            <tr className="bg-gray-100 text-gray-700">
+              <th className="border border-gray-300 px-4 py-2">Printer</th>
+              <th className="border border-gray-300 px-4 py-2">Product Type</th>
+              <th className="border border-gray-300 px-4 py-2">Height</th>
+              <th className="border border-gray-300 px-4 py-2">Width</th>
+              <th className="border border-gray-300 px-4 py-2">Coordinates</th>
+              <th className="border border-gray-300 px-4 py-2">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((item) => (
+              <tr
+                key={item.id}
+                className="hover:bg-gray-50 transition duration-200"
+              >
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {item.printer}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {item.product_type}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {item.height}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  {item.width}
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  <ul className="list-disc list-inside">
+                    {item.coordinates.map((coord, index) => (
+                      <li key={index} className="text-sm text-gray-600">
+                        X: {coord.x}, Y: {coord.y}, Rotation: {coord.rotation}
+                      </li>
+                    ))}
+                  </ul>
+                </td>
+                <td className="border border-gray-300 px-4 py-2 text-center">
+                  <button
+                    onClick={() => onDelete(item.id)}
+                    className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600 transition duration-200"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}