feat(admin): Control Center redesign, Explore dual-view и полный RU/EN i18n
Refs EventHub/EventHubFrontAdmin#32
This commit is contained in:
@@ -0,0 +1,112 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { TablePaginationBar } from '@/components/explore/TablePaginationBar';
|
||||
import type { ServerTableParams } from '@/components/data-table/DataTable';
|
||||
import type { RowAction } from '@/components/explore/RowActionsMenu';
|
||||
import { RowActionsMenu } from '@/components/explore/RowActionsMenu';
|
||||
|
||||
export interface DenseRowModel {
|
||||
id: string;
|
||||
title: ReactNode;
|
||||
subtitle?: ReactNode;
|
||||
badges?: ReactNode;
|
||||
meta?: ReactNode;
|
||||
onActivate?: () => void;
|
||||
actions?: RowAction[];
|
||||
}
|
||||
|
||||
interface DenseRowListProps<TParams extends ServerTableParams> {
|
||||
items: DenseRowModel[];
|
||||
isLoading?: boolean;
|
||||
emptyMessage?: string;
|
||||
tableKey: string;
|
||||
params: TParams;
|
||||
total?: number;
|
||||
onParamsChange: (params: TParams) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function DenseRowList<TParams extends ServerTableParams>({
|
||||
items,
|
||||
isLoading,
|
||||
emptyMessage,
|
||||
tableKey,
|
||||
params,
|
||||
total,
|
||||
onParamsChange,
|
||||
className,
|
||||
}: DenseRowListProps<TParams>) {
|
||||
const { t } = useTranslation();
|
||||
const empty = emptyMessage ?? t('common.noData');
|
||||
return (
|
||||
<div className={cn('space-y-3', className)}>
|
||||
<div className="overflow-hidden rounded-md border">
|
||||
{isLoading ? (
|
||||
<div className="divide-y">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3 px-4 py-3">
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-3 w-32" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-8" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<div className="px-4 py-12 text-center text-sm text-muted-foreground">{empty}</div>
|
||||
) : (
|
||||
<ul className="divide-y">
|
||||
{items.map((item) => (
|
||||
<li key={item.id}>
|
||||
<div
|
||||
className={cn(
|
||||
'group flex items-start gap-3 px-4 py-3 transition-colors',
|
||||
item.onActivate && 'hover:bg-muted/40'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'min-w-0 flex-1 text-left',
|
||||
!item.onActivate && 'cursor-default'
|
||||
)}
|
||||
onClick={item.onActivate}
|
||||
disabled={!item.onActivate}
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="truncate font-medium text-foreground group-hover:text-primary">
|
||||
{item.title}
|
||||
</span>
|
||||
{item.badges}
|
||||
</div>
|
||||
{(item.subtitle || item.meta) && (
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
|
||||
{item.subtitle && <span className="truncate">{item.subtitle}</span>}
|
||||
{item.meta && <span className="tabular-nums">{item.meta}</span>}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
{item.actions && item.actions.length > 0 && (
|
||||
<div className="shrink-0 pt-0.5" onClick={(e) => e.stopPropagation()}>
|
||||
<RowActionsMenu actions={item.actions} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<TablePaginationBar
|
||||
tableKey={tableKey}
|
||||
params={params}
|
||||
total={total}
|
||||
dataLength={items.length}
|
||||
onParamsChange={onParamsChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import type { ExploreViewMode } from '@/lib/exploreView';
|
||||
import { DataTable, type ServerTableParams } from '@/components/data-table/DataTable';
|
||||
import { DenseRowList, type DenseRowModel } from '@/components/explore/DenseRowList';
|
||||
|
||||
interface ExploreDataViewProps<TData, TParams extends ServerTableParams> {
|
||||
viewMode: ExploreViewMode;
|
||||
columns: ColumnDef<TData, unknown>[];
|
||||
data: TData[];
|
||||
total?: number;
|
||||
isLoading?: boolean;
|
||||
tableKey: string;
|
||||
params: TParams;
|
||||
onParamsChange: (params: TParams) => void;
|
||||
emptyMessage?: string;
|
||||
denseRows: DenseRowModel[];
|
||||
}
|
||||
|
||||
export function ExploreDataView<TData, TParams extends ServerTableParams>({
|
||||
viewMode,
|
||||
columns,
|
||||
data,
|
||||
total,
|
||||
isLoading,
|
||||
tableKey,
|
||||
params,
|
||||
onParamsChange,
|
||||
emptyMessage,
|
||||
denseRows,
|
||||
}: ExploreDataViewProps<TData, TParams>) {
|
||||
if (viewMode === 'rows') {
|
||||
return (
|
||||
<DenseRowList
|
||||
items={denseRows}
|
||||
isLoading={isLoading}
|
||||
emptyMessage={emptyMessage}
|
||||
tableKey={tableKey}
|
||||
params={params}
|
||||
total={total}
|
||||
onParamsChange={onParamsChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
total={total}
|
||||
isLoading={isLoading}
|
||||
tableKey={tableKey}
|
||||
params={params}
|
||||
onParamsChange={onParamsChange}
|
||||
emptyMessage={emptyMessage}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { useMemo, useState, type ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface ExploreInsightRow {
|
||||
id: string;
|
||||
primary: ReactNode;
|
||||
secondary?: ReactNode;
|
||||
value: ReactNode;
|
||||
}
|
||||
|
||||
export interface ExploreInsightTab {
|
||||
id: string;
|
||||
label: string;
|
||||
rows: ExploreInsightRow[];
|
||||
}
|
||||
|
||||
interface ExploreInsightsCollapseProps {
|
||||
/** Header label when collapsed */
|
||||
title?: string;
|
||||
tabs: ExploreInsightTab[];
|
||||
/** Max rows shown per tab (default 5) */
|
||||
limit?: number;
|
||||
defaultOpen?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ExploreInsightsCollapse({
|
||||
title,
|
||||
tabs,
|
||||
limit = 5,
|
||||
defaultOpen = false,
|
||||
className,
|
||||
}: ExploreInsightsCollapseProps) {
|
||||
const { t } = useTranslation();
|
||||
const headerTitle = title ?? t('explore.tops');
|
||||
const nonEmpty = useMemo(() => tabs.filter((tab) => tab.rows.length > 0), [tabs]);
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
|
||||
if (nonEmpty.length === 0) return null;
|
||||
|
||||
const active = nonEmpty.find((tab) => tab.id === activeId) ?? nonEmpty[0];
|
||||
const visible = active.rows.slice(0, limit);
|
||||
const totalRows = nonEmpty.reduce((sum, tab) => sum + tab.rows.length, 0);
|
||||
|
||||
return (
|
||||
<div className={cn('rounded-md border border-border/70 bg-muted/20', className)}>
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-expanded={open}
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn('h-4 w-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-90')}
|
||||
/>
|
||||
<span className="font-medium text-foreground">{headerTitle}</span>
|
||||
<span className="tabular-nums text-muted-foreground">
|
||||
· {nonEmpty.length > 1 ? t('explore.listsCount', { count: nonEmpty.length }) : totalRows}
|
||||
</span>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="border-t border-border/60">
|
||||
{nonEmpty.length > 1 && (
|
||||
<div className="flex flex-wrap gap-1 border-b border-border/50 px-2 py-1.5">
|
||||
{nonEmpty.map((tab) => {
|
||||
const isActive = tab.id === active.id;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
type="button"
|
||||
className={cn(
|
||||
'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
|
||||
isActive
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
|
||||
)}
|
||||
onClick={() => setActiveId(tab.id)}
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
{tab.label}
|
||||
<span className="ml-1 tabular-nums opacity-60">{tab.rows.length}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<ul className="divide-y divide-border/50">
|
||||
{visible.map((row) => (
|
||||
<li key={row.id} className="flex items-baseline gap-3 px-3 py-2 text-sm">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate font-medium">{row.primary}</div>
|
||||
{row.secondary && (
|
||||
<div className="truncate text-xs text-muted-foreground">{row.secondary}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="shrink-0 tabular-nums text-muted-foreground">{row.value}</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ExploreViewMode } from '@/lib/exploreView';
|
||||
import { ExploreViewToggle } from '@/components/explore/ExploreViewToggle';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export interface ExploreStat {
|
||||
label: string;
|
||||
value: number | string;
|
||||
}
|
||||
|
||||
interface ExploreListShellProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
stats?: ExploreStat[];
|
||||
actions?: ReactNode;
|
||||
toolbar?: ReactNode;
|
||||
/** Soft CTA strip (e.g. Reports → входящие) */
|
||||
banner?: {
|
||||
text: string;
|
||||
to: string;
|
||||
actionLabel?: string;
|
||||
};
|
||||
viewMode: ExploreViewMode;
|
||||
onViewModeChange: (mode: ExploreViewMode) => void;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ExploreListShell({
|
||||
title,
|
||||
description,
|
||||
stats,
|
||||
actions,
|
||||
toolbar,
|
||||
banner,
|
||||
viewMode,
|
||||
onViewModeChange,
|
||||
children,
|
||||
className,
|
||||
}: ExploreListShellProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className={cn('space-y-4', className)}>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
||||
{description && <p className="text-sm text-muted-foreground">{description}</p>}
|
||||
{stats && stats.length > 0 && (
|
||||
<p className="pt-1 text-sm tabular-nums text-muted-foreground">
|
||||
{stats.map((s, i) => (
|
||||
<span key={s.label}>
|
||||
{i > 0 && <span className="mx-2 text-border">·</span>}
|
||||
<span className="text-foreground/80">{s.label}</span>{' '}
|
||||
<span className="font-medium text-foreground">{s.value}</span>
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
|
||||
</div>
|
||||
|
||||
{banner && (
|
||||
<div className="flex flex-col gap-2 rounded-lg border border-border/80 bg-muted/30 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-sm text-muted-foreground">{banner.text}</p>
|
||||
<Button asChild variant="outline" size="sm" className="shrink-0 gap-1.5">
|
||||
<Link to={banner.to}>
|
||||
{banner.actionLabel ?? t('common.openInbox')}
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="min-w-0 flex-1">{toolbar}</div>
|
||||
<ExploreViewToggle value={viewMode} onChange={onViewModeChange} className="shrink-0 self-end sm:self-auto" />
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Search } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ExploreSearchProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
onSubmit: () => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function ExploreSearch({
|
||||
value,
|
||||
onChange,
|
||||
onSubmit,
|
||||
placeholder,
|
||||
className,
|
||||
children,
|
||||
}: ExploreSearchProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<form
|
||||
className={cn('flex flex-wrap items-center gap-2', className)}
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
}}
|
||||
>
|
||||
<div className="relative min-w-[200px] max-w-md flex-1">
|
||||
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
className="pl-8"
|
||||
placeholder={placeholder ?? t('common.searchPlaceholder')}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{children}
|
||||
<Button type="submit" variant="secondary" size="sm" className="h-9">
|
||||
{t('common.find')}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { LayoutList, Table2 } from 'lucide-react';
|
||||
import type { ExploreViewMode } from '@/lib/exploreView';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface ExploreViewToggleProps {
|
||||
value: ExploreViewMode;
|
||||
onChange: (mode: ExploreViewMode) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ExploreViewToggle({ value, onChange, className }: ExploreViewToggleProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div
|
||||
className={cn('inline-flex rounded-md border bg-background p-0.5', className)}
|
||||
role="group"
|
||||
aria-label={t('explore.viewAria')}
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
variant={value === 'table' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
onClick={() => onChange('table')}
|
||||
aria-pressed={value === 'table'}
|
||||
>
|
||||
<Table2 className="h-3.5 w-3.5" />
|
||||
<span className="hidden sm:inline">{t('explore.table')}</span>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={value === 'rows' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
onClick={() => onChange('rows')}
|
||||
aria-pressed={value === 'rows'}
|
||||
>
|
||||
<LayoutList className="h-3.5 w-3.5" />
|
||||
<span className="hidden sm:inline">{t('explore.rows')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Fragment, type ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { MoreHorizontal } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface RowAction {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
destructive?: boolean;
|
||||
separatorBefore?: boolean;
|
||||
icon?: ReactNode;
|
||||
}
|
||||
|
||||
interface RowActionsMenuProps {
|
||||
actions: RowAction[];
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export function RowActionsMenu({ actions, label }: RowActionsMenuProps) {
|
||||
const { t } = useTranslation();
|
||||
const menuLabel = label ?? t('common.actions');
|
||||
if (actions.length === 0) return null;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8" aria-label={menuLabel} title={menuLabel}>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
{actions.map((action) => (
|
||||
<Fragment key={action.label}>
|
||||
{action.separatorBefore && <DropdownMenuSeparator />}
|
||||
<DropdownMenuItem
|
||||
disabled={action.disabled}
|
||||
className={cn(action.destructive && 'text-destructive focus:text-destructive')}
|
||||
onClick={action.onClick}
|
||||
>
|
||||
{action.icon && <span className="mr-2 inline-flex shrink-0">{action.icon}</span>}
|
||||
{action.label}
|
||||
</DropdownMenuItem>
|
||||
</Fragment>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
DEFAULT_TABLE_PAGE_SIZE,
|
||||
TABLE_PAGE_SIZE_OPTIONS,
|
||||
getTablePagination,
|
||||
mergeTablePagination,
|
||||
} from '@/utils/tablePagination';
|
||||
import type { ServerTableParams } from '@/components/data-table/DataTable';
|
||||
|
||||
interface TablePaginationBarProps<TParams extends ServerTableParams> {
|
||||
tableKey: string;
|
||||
params: TParams;
|
||||
total?: number;
|
||||
dataLength: number;
|
||||
onParamsChange: (params: TParams) => void;
|
||||
}
|
||||
|
||||
export function TablePaginationBar<TParams extends ServerTableParams>({
|
||||
tableKey,
|
||||
params,
|
||||
total,
|
||||
dataLength,
|
||||
onParamsChange,
|
||||
}: TablePaginationBarProps<TParams>) {
|
||||
const { t } = useTranslation();
|
||||
const pagination = getTablePagination(params, total);
|
||||
const pageCount = total != null ? Math.max(1, Math.ceil(total / pagination.pageSize)) : 1;
|
||||
const canPrev = pagination.current > 1;
|
||||
const canNext = total != null ? pagination.current < pageCount : dataLength >= pagination.pageSize;
|
||||
|
||||
const handlePageSizeChange = (size: string) => {
|
||||
const pageSize = Number(size);
|
||||
onParamsChange(
|
||||
mergeTablePagination({ ...params, offset: 0 }, { pageSize, current: 1 }, tableKey)
|
||||
);
|
||||
};
|
||||
|
||||
const handlePageChange = (nextPage: number) => {
|
||||
onParamsChange(
|
||||
mergeTablePagination(params, { current: nextPage, pageSize: pagination.pageSize }, tableKey)
|
||||
);
|
||||
};
|
||||
|
||||
const from = (params.offset ?? 0) + 1;
|
||||
const to = Math.min((params.offset ?? 0) + (params.limit ?? DEFAULT_TABLE_PAGE_SIZE), total ?? 0);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{total != null ? (
|
||||
t('common.shownRange', { from, to, total })
|
||||
) : (
|
||||
t('common.pageLabel', { current: pagination.current })
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">{t('common.perPage')}</span>
|
||||
<Select value={String(pagination.pageSize)} onValueChange={handlePageSizeChange}>
|
||||
<SelectTrigger className="h-8 w-[70px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{TABLE_PAGE_SIZE_OPTIONS.map((size) => (
|
||||
<SelectItem key={size} value={String(size)}>
|
||||
{size}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
disabled={!canPrev}
|
||||
onClick={() => handlePageChange(pagination.current - 1)}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<span className="min-w-[4rem] text-center text-sm tabular-nums">
|
||||
{pagination.current} / {pageCount}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
disabled={!canNext}
|
||||
onClick={() => handlePageChange(pagination.current + 1)}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user