From 410d0dcad42dc1647ff9851218d9d824c7bad866 Mon Sep 17 00:00:00 2001
From: Tetiana Mohorian <tetiana.mohorian@student.tuke.sk>
Date: Mon, 28 Apr 2025 23:02:17 +0000
Subject: [PATCH] =?UTF-8?q?P=C5=99idat=20sk1/frontend/src/components/Histo?=
 =?UTF-8?q?ria.jsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sk1/frontend/src/components/Historia.jsx | 35 ++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 sk1/frontend/src/components/Historia.jsx

diff --git a/sk1/frontend/src/components/Historia.jsx b/sk1/frontend/src/components/Historia.jsx
new file mode 100644
index 0000000..a1a6be6
--- /dev/null
+++ b/sk1/frontend/src/components/Historia.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const Historia = ({ history }) => {
+  if (!history || history.length === 0) {
+    return <p className="text-center text-gray-400 p-4">Zatiaľ žiadna história</p>;
+  }
+
+  return (
+    <div className="flex justify-center w-full">
+      <div className="overflow-x-auto w-[70%] min-w-[400px]">
+      <table className="table-fixed border-collapse text-gray-300 w-full" style={{ borderSpacing: "20px 0" }}>
+        <tbody>
+          {history.map((item, index) => (
+            <tr key={index} className={index % 2 === 0 ? 'bg-gray-800/40' : 'bg-gray-800/20'}>
+              <td className="px-6 py-3 text-left">{item.text}</td>
+              <td className="px-6 py-3 text-center">
+                <span className={`px-3 py-1 rounded-full text-xs font-medium ${
+                  item.prediction.includes("toxický") 
+                  ? "bg-red-500/40 text-red-100" 
+                  : "bg-green-500/40 text-green-100"
+                }`}>
+                  {item.prediction}
+                </span>
+              </td>
+              <td className="px-6 py-3 text-right text-gray-400 text-xs">{item.timestamp}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+    </div>
+  );
+};
+
+export default Historia;