54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { observer } from "mobx-react";
|
|
// utils
|
|
import { cn } from "@plane/utils";
|
|
|
|
type EmptyStateSize = "sm" | "lg";
|
|
|
|
type Props = {
|
|
title: string;
|
|
description?: string;
|
|
assetPath?: string;
|
|
size?: EmptyStateSize;
|
|
};
|
|
|
|
const sizeConfig = {
|
|
sm: {
|
|
container: "size-24",
|
|
dimensions: 78,
|
|
},
|
|
lg: {
|
|
container: "size-28",
|
|
dimensions: 96,
|
|
},
|
|
} as const;
|
|
|
|
const getTitleClassName = (hasDescription: boolean) =>
|
|
cn("font-medium whitespace-pre-line", {
|
|
"text-13 text-placeholder": !hasDescription,
|
|
"text-16 text-tertiary": hasDescription,
|
|
});
|
|
|
|
export const SimpleEmptyState = observer(function SimpleEmptyState(props: Props) {
|
|
const { title, description, size = "sm", assetPath } = props;
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-2.5 text-center">
|
|
{assetPath && (
|
|
<div className={sizeConfig[size].container}>
|
|
<img src={assetPath} alt={title} className="h-full w-full object-contain" />
|
|
</div>
|
|
)}
|
|
|
|
<h3 className={getTitleClassName(!!description)}>{title}</h3>
|
|
|
|
{description && <p className="text-14 font-medium whitespace-pre-line text-placeholder">{description}</p>}
|
|
</div>
|
|
);
|
|
});
|