soufiane
467696e5b8
- Add utils/export.ts for centralized CSV export functionality - Add EmptyState component for consistent empty state UI - Add Pagination component for reusable pagination controls - Refactor employe/gains-client to use apiFetch and EmptyState - Refactor employe/historique to use apiFetch and EmptyState - Export new components from ui/index.ts Target: reduce duplication from 13.93% to under 3% 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
42 lines
892 B
TypeScript
42 lines
892 B
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
interface EmptyStateProps {
|
|
icon?: string;
|
|
title?: string;
|
|
message: string;
|
|
action?: {
|
|
label: string;
|
|
onClick: () => void;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Reusable empty state component for lists and tables
|
|
*/
|
|
export const EmptyState: React.FC<EmptyStateProps> = ({
|
|
icon = '📝',
|
|
title,
|
|
message,
|
|
action,
|
|
}) => {
|
|
return (
|
|
<div className="text-center py-16">
|
|
<div className="text-6xl mb-4">{icon}</div>
|
|
{title && <h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>}
|
|
<p className="text-gray-600 mb-4">{message}</p>
|
|
{action && (
|
|
<button
|
|
onClick={action.onClick}
|
|
className="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-lg transition"
|
|
>
|
|
{action.label}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmptyState;
|