made the creation of an entity more accessible and obvious

app/src/ui/components/display/Empty.tsx

@@ -1,33 +1,33 @@
-import { Button } from "../buttons/Button";
+import { twMerge } from "tailwind-merge";
+import { Button, type ButtonProps } from "../buttons/Button";
 
 export type EmptyProps = {
    Icon?: any;
    title?: string;
    description?: string;
-   buttonText?: string;
-   buttonOnClick?: () => void;
+   primary?: ButtonProps;
+   secondary?: ButtonProps;
+   className?: string;
 };
 export const Empty: React.FC<EmptyProps> = ({
    Icon = undefined,
    title = undefined,
    description = "Check back later my friend.",
-   buttonText,
-   buttonOnClick
+   primary,
+   secondary,
+   className
 }) => (
-   <div className="flex flex-col h-full w-full justify-center items-center">
+   <div className={twMerge("flex flex-col h-full w-full justify-center items-center", className)}>
       <div className="flex flex-col gap-3 items-center max-w-80">
          {Icon && <Icon size={48} className="opacity-50" stroke={1} />}
          <div className="flex flex-col gap-1">
             {title && <h3 className="text-center text-lg font-bold">{title}</h3>}
             <p className="text-center text-primary/60">{description}</p>
          </div>
-         {buttonText && (
-            <div className="mt-1.5">
-               <Button variant="primary" onClick={buttonOnClick}>
-                  {buttonText}
-               </Button>
-            </div>
-         )}
+         <div className="mt-1.5 flex flex-row gap-2">
+            {secondary && <Button variant="default" {...secondary} />}
+            {primary && <Button variant="primary" {...primary} />}
+         </div>
       </div>
    </div>
 );