Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 54x 15x 54x | import React from "react";
import { Button, buttonVariants } from "./Button";
import Link from "next/link";
interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
icon?: React.ReactNode;
heading: string;
message?: string;
action?: {
label: string;
mobileLabel?: string;
href?: string;
onClick?: () => void;
};
}
const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
({ icon, heading, message, action, className = "", ...props }, ref) => (
<div
className={`
flex flex-col items-center justify-center py-12 px-4 text-center
${className}
`}
ref={ref}
{...props}
>
{icon && <div className="mb-4 text-primary text-5xl">{icon}</div>}
<h3 className="text-lg text-ink mb-2">{heading}</h3>
{message && <p className="text-ink-soft mb-6 max-w-sm">{message}</p>}
{action?.href ? (
<Link
href={action.href}
aria-label={action.mobileLabel ? action.label : undefined}
className={`${buttonVariants({ variant: "primary" })} w-full max-w-xs sm:w-auto`}
>
{action.mobileLabel ? (
<>
<span className="sm:hidden">{action.mobileLabel}</span>
<span className="hidden sm:inline">{action.label}</span>
</>
) : (
action.label
)}
</Link>
) : action ? (
<Button
variant="primary"
onClick={action.onClick}
aria-label={action.mobileLabel ? action.label : undefined}
className="w-full max-w-xs sm:w-auto"
>
{action.mobileLabel ? (
<>
<span className="sm:hidden">{action.mobileLabel}</span>
<span className="hidden sm:inline">{action.label}</span>
</>
) : (
action.label
)}
</Button>
) : null}
</div>
)
);
EmptyState.displayName = "EmptyState";
export { EmptyState };
|