43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
import { Button } from "@/ui";
|
||
|
|
import { PlusIcon } from "lucide-react";
|
||
|
|
|
||
|
|
export const SimpleEmptyState = ({
|
||
|
|
title = "Esto está muy vacío",
|
||
|
|
subtitle = "Empieza dando de alta un item",
|
||
|
|
buttonText = "Nuevo item",
|
||
|
|
onButtonClick = () => {},
|
||
|
|
actions = undefined,
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<div className="text-center">
|
||
|
|
<svg
|
||
|
|
className="w-12 h-12 mx-auto text-slate-400"
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
stroke="currentColor"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
vectorEffect="non-scaling-stroke"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={2}
|
||
|
|
d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<h3 className="mt-2 text-sm font-semibold text-slate-900">{title}</h3>
|
||
|
|
<p className="mt-1 text-sm text-slate-500">{subtitle}</p>
|
||
|
|
|
||
|
|
<div className="items-center mt-6">
|
||
|
|
{actions && <>{actions}</>}
|
||
|
|
{!actions && (
|
||
|
|
<Button className="my-4" onClick={onButtonClick}>
|
||
|
|
<PlusIcon />
|
||
|
|
{buttonText}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|