detail page done

src/widgets/history/ui/tableStates.tsx

@@ -0,0 +1,75 @@
+'use client';
+import React from 'react';
+import { EmptyStateProps, SkeletonRowProps } from '../lib/types';
+
+// ─── Empty State ───────────────────────────────────────────────────────────────
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  message = 'No plagiarism checks found.',
+}) => (
+  <tr>
+    <td colSpan={6}>
+      <div className="flex flex-col items-center justify-center py-16 text-slate-400 gap-3">
+        <svg
+          width="40"
+          height="40"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          className="text-slate-300"
+        >
+          <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+        <span className="text-sm font-medium">{message}</span>
+      </div>
+    </td>
+  </tr>
+);
+
+// ─── Skeleton Row ──────────────────────────────────────────────────────────────
+
+const SkeletonCell: React.FC<{ width?: string }> = ({ width = 'w-24' }) => (
+  <td className="px-4 py-3.5">
+    <div className={`h-4 ${width} bg-slate-100 rounded animate-pulse`} />
+  </td>
+);
+
+export const SkeletonRow: React.FC<SkeletonRowProps> = ({ columns }) => {
+  const widths = ['w-32', 'w-40', 'w-20', 'w-24', 'w-20', 'w-16'];
+  return (
+    <tr className="border-b border-slate-100">
+      {Array.from({ length: columns }).map((_, i) => (
+        <SkeletonCell key={i} width={widths[i] ?? 'w-20'} />
+      ))}
+    </tr>
+  );
+};
+
+// ─── Error State ───────────────────────────────────────────────────────────────
+
+interface ErrorStateProps {
+  message: string | null | undefined;
+  onRetry: () => void;
+}
+
+export const ErrorState: React.FC<ErrorStateProps> = ({ message, onRetry }) => (
+  <tr>
+    <td colSpan={6}>
+      <div className="flex flex-col items-center justify-center py-14 gap-3">
+        <div className="flex items-center gap-2 text-red-600 text-sm font-medium">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+          </svg>
+          {message}
+        </div>
+        <button
+          onClick={onRetry}
+          className="text-xs text-slate-500 underline underline-offset-2 hover:text-slate-800 transition-colors"
+        >
+          Try again
+        </button>
+      </div>
+    </td>
+  </tr>
+);