50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useHistory } from '../lib/useHistory';
|
|
import { HistoryTable } from './historyTable';
|
|
import { Pagination } from './pagination';
|
|
|
|
// ─── Page Header ───────────────────────────────────────────────────────────────
|
|
|
|
const PageHeader: React.FC = () => {
|
|
const t = useTranslations('HistoryPage');
|
|
|
|
return (
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-semibold text-slate-900 tracking-tight">
|
|
{t('title')}
|
|
</h1>
|
|
<p className="mt-1 text-sm text-slate-500">{t('description')}</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ─── HistoryPage ───────────────────────────────────────────────────────────────
|
|
|
|
export const HistoryPage = () => {
|
|
const { items, status, error, refetch, currentPage, totalPages, goToPage } =
|
|
useHistory();
|
|
|
|
return (
|
|
<div className=" px-4 py-10 sm:px-6 lg:px-8">
|
|
<div className="mx-auto max-w-6xl">
|
|
<PageHeader />
|
|
|
|
<HistoryTable
|
|
items={items}
|
|
isLoading={false}
|
|
error={status === 'error' ? error : null}
|
|
onRetry={refetch}
|
|
/>
|
|
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
onPageChange={goToPage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|