32 lines
895 B
TypeScript
32 lines
895 B
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { ReactNode } from 'react';
|
|||
|
|
import { cn } from '@/lib/utils';
|
|||
|
|
|
|||
|
|
interface TableToolbarProps {
|
|||
|
|
/** 左侧：搜索/筛选区 */
|
|||
|
|
left?: ReactNode;
|
|||
|
|
/** 右侧：操作按钮区 */
|
|||
|
|
right?: ReactNode;
|
|||
|
|
className?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 标准列表工具条：左侧搜索筛选 + 右侧操作按钮，同一行布局。
|
|||
|
|
* 左侧搜索区强制不换行（保持一行展示）；
|
|||
|
|
* 外层保留 flex-wrap，极窄屏时右侧操作按钮可降级到下一行。
|
|||
|
|
*/
|
|||
|
|
export function TableToolbar({ left, right, className }: TableToolbarProps) {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={cn(
|
|||
|
|
'mb-4 flex flex-wrap items-center justify-between gap-2',
|
|||
|
|
className,
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center gap-2 whitespace-nowrap">{left}</div>
|
|||
|
|
{right && <div className="flex items-center gap-2 whitespace-nowrap">{right}</div>}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|