76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
'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>
|
|
);
|