upstream-plane/apps/web/core/components/empty-state/simple-empty-state-root.tsx

/**
 * 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>
  );
});