53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
export interface EmptyStateProps {
|
|
icon?: ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
action?: ReactNode;
|
|
}
|
|
|
|
/** Centered empty-state placeholder: icon, title, description, optional CTA. */
|
|
export default function EmptyState({
|
|
icon,
|
|
title,
|
|
description,
|
|
action,
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
textAlign: "center",
|
|
py: 6,
|
|
color: "text.secondary",
|
|
gap: 1,
|
|
}}
|
|
>
|
|
{icon && (
|
|
<Box
|
|
sx={{ color: "text.disabled", mb: 0.5, fontSize: 48, lineHeight: 1 }}
|
|
>
|
|
{icon}
|
|
</Box>
|
|
)}
|
|
<Typography
|
|
variant="subtitle1"
|
|
sx={{ fontWeight: 500, color: "text.secondary" }}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
{description && (
|
|
<Typography variant="body2" color="text.secondary">
|
|
{description}
|
|
</Typography>
|
|
)}
|
|
{action && <Box sx={{ mt: 1.5 }}>{action}</Box>}
|
|
</Box>
|
|
);
|
|
}
|