57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
|
import React, { useState, memo } from 'react';
|
||
|
|
import type { Submission } from '../types';
|
||
|
|
import HistoryItem from './HistoryItem';
|
||
|
|
|
||
|
|
interface SubmissionHistoryProps {
|
||
|
|
submissions: Submission[];
|
||
|
|
onErrorClick: (details: string) => void;
|
||
|
|
onDelete: (id: string) => void;
|
||
|
|
onRetry: (submission: Submission, errorGeIds: string[], errorUsernames: string[]) => void;
|
||
|
|
onPaste: (username: string, geIdAndLang: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const SubmissionHistory: React.FC<SubmissionHistoryProps> = ({ submissions, onErrorClick, onDelete, onRetry, onPaste }) => {
|
||
|
|
const [hideNonErrors, setHideNonErrors] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full">
|
||
|
|
<div className="flex justify-between items-center mb-6">
|
||
|
|
<h2 className="text-2xl font-semibold text-white">Lịch sử submit</h2>
|
||
|
|
<label className="flex items-center gap-2 text-sm text-slate-400 cursor-pointer">
|
||
|
|
<span>Chỉ hiện lỗi</span>
|
||
|
|
<button
|
||
|
|
onClick={() => setHideNonErrors(!hideNonErrors)}
|
||
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${hideNonErrors ? 'bg-indigo-600' : 'bg-slate-600'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${hideNonErrors ? 'translate-x-6' : 'translate-x-1'
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
{submissions.length > 0 ? (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{submissions.map((sub) => (
|
||
|
|
<HistoryItem
|
||
|
|
key={sub.id}
|
||
|
|
submission={sub}
|
||
|
|
onErrorClick={onErrorClick}
|
||
|
|
onDelete={onDelete}
|
||
|
|
onRetry={onRetry}
|
||
|
|
onPaste={onPaste}
|
||
|
|
hideNonErrors={hideNonErrors}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="text-center py-10 px-6 bg-slate-800/50 border border-slate-700 rounded-lg">
|
||
|
|
<p className="text-slate-400">Chưa có lần submit nào.</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default memo(SubmissionHistory);
|