first commit

calcom/packages/ui/components/unpublished-entity/UnpublishedEntity.tsx

@@ -0,0 +1,38 @@
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { EmptyScreen, Avatar } from "@calcom/ui";
+
+export type UnpublishedEntityProps = {
+  /**
+   * If it is passed, don't pass orgSlug
+   * It conveys two things - Slug for the team and that it is not an organization
+   */
+  teamSlug?: string | null;
+  /**
+   * If it is passed, don't pass teamSlug.
+   * It conveys two things - Slug for the team and that it is an organization infact
+   */
+  orgSlug?: string | null;
+  /* logo url for entity */
+  logoUrl?: string | null;
+  /**
+   * Team or Organization name
+   */
+  name?: string | null;
+};
+
+export function UnpublishedEntity(props: UnpublishedEntityProps) {
+  const { t } = useLocale();
+  const slug = props.orgSlug || props.teamSlug;
+  return (
+    <div className="m-8 flex items-center justify-center">
+      <EmptyScreen
+        avatar={<Avatar alt={slug ?? ""} imageSrc={getPlaceholderAvatar(props.logoUrl, slug)} size="lg" />}
+        headline={t("team_is_unpublished", {
+          team: props.name,
+        })}
+        description={t(`${props.orgSlug ? "org" : "team"}_is_unpublished_description`)}
+      />
+    </div>
+  );
+}

calcom/packages/ui/components/unpublished-entity/index.ts

@@ -0,0 +1,2 @@
+export { UnpublishedEntity } from "./UnpublishedEntity";
+export type { UnpublishedEntityProps } from "./UnpublishedEntity";

calcom/packages/ui/components/unpublished-entity/unpublishedEntity.stories.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import { Title, CustomArgsTable, VariantsTable, VariantRow } from "@calcom/storybook/components";
+
+import { UnpublishedEntity } from "./UnpublishedEntity";
+
+<Meta title="UI/UnpublishedEntity" component={UnpublishedEntity} />
+
+<Title title="UnpublishedEntity" suffix="Brief" subtitle="Version 1.0 — Last Update: 17 Aug 2023" />
+
+## Definition
+
+The `UnpublishedEntity` component is used to display an "empty screen" with relevant information for unpublished teams or organizations.
+
+## Structure
+
+The `UnpublishedEntity` component consists of the following parts:
+
+- An `EmptyScreen` component from `@calcom/ui` that displays a visual representation of an "empty screen."
+- An `Avatar` component from `@calcom/ui` that shows an avatar image associated with the organization or team.
+- Translated text obtained using the `useLocale` hook for displaying messages based on the entity's status.
+
+<CustomArgsTable of={UnpublishedEntity} />
+
+## UnpublishedEntity Story
+
+<Canvas>
+  <Story name="UnpublishedEntity" args={{ name: "TeamExample", teamSlug: "team-example" }}>
+    {(args) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow>
+          <UnpublishedEntity {...args} />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>