usaa.ma
A deployable markdown editor that connects with your self hosted files and lets you edit in a beautiful interface
1import React from 'react';
2
3interface EmptyStateProps {
4 icon?: React.ReactNode;
5 title: string;
6 description?: string;
7 action?: {
8 label: string;
9 onClick: () => void;
10 };
11}
12
13export const EmptyState: React.FC<EmptyStateProps> = ({
14 icon,
15 title,
16 description,
17 action,
18}) => {
19 return (
20 <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
21 {icon && (
22 <div className="mb-4 text-gray-400">
23 {icon}
24 </div>
25 )}
26 <h3 className="text-xl font-bold text-gray-900 mb-2 font-heading">
27 {title}
28 </h3>
29 {description && (
30 <p className="text-gray-600 max-w-md mb-6">
31 {description}
32 </p>
33 )}
34 {action && (
35 <button
36 onClick={action.onClick}
37 className="px-6 py-2 bg-amber-600 text-white font-bold border-2 border-black hover:bg-amber-700 transition-colors"
38 >
39 {action.label}
40 </button>
41 )}
42 </div>
43 );
44};