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-lg font-semibold text-slate-900'>{title}</h3>
|
|
<p className='mt-1 text-base 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>
|
|
);
|
|
};
|