UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: каркас вкладки внешние контуры

2026-04-18 20:20:28 +03:00
parent a59f09e2f0
commit c76f519488
9 changed files with 229 additions and 18 deletions
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Outlet } from "react-router";
+import { AppHeader } from "@/components/core/app-header";
+import { ContentWrapper } from "@/components/core/content-wrapper";
+import { ProjectExternalContoursHeader } from "@/plane-web/components/projects/external-contours/header";
+
+export default function ProjectExternalContoursLayout() {
+  return (
+    <>
+      <AppHeader header={<ProjectExternalContoursHeader />} />
+      <ContentWrapper>
+        <Outlet />
+      </ContentWrapper>
+    </>
+  );
+}
@@ -0,0 +1,60 @@
+/**
+ * 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";
+import { useTranslation } from "@plane/i18n";
+import { TransferIcon } from "@plane/propel/icons";
+import { PageHead } from "@/components/core/page-title";
+import { useProject } from "@/hooks/store/use-project";
+import type { Route } from "./+types/page";
+
+function ProjectExternalContoursPage(_props: Route.ComponentProps) {
+  const { t } = useTranslation();
+  const { currentProjectDetails } = useProject();
+
+  const pageTitle = currentProjectDetails?.name
+    ? t("external_contours_page.page_label", { workspace: currentProjectDetails.name })
+    : t("external_contours_page.page_label", { workspace: "NODE.DC" });
+
+  return (
+    <div className="flex h-full flex-col">
+      <PageHead title={pageTitle} />
+      <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-5 py-6 md:px-8">
+        <section className="rounded-xl border border-subtle bg-surface-1 p-6">
+          <div className="flex items-start gap-4">
+            <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-accent-primary/10 text-accent-primary">
+              <TransferIcon className="h-5 w-5 fill-current" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <h1 className="text-2xl font-semibold text-primary">{t("external_contours_page.empty_state.title")}</h1>
+              <p className="max-w-3xl text-sm text-secondary">
+                {t("external_contours_page.empty_state.description")}
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section className="grid gap-4 lg:grid-cols-2">
+          <div className="rounded-xl border border-dashed border-subtle bg-surface-1 p-6">
+            <p className="mb-2 text-base font-semibold text-primary">
+              {t("external_contours_page.empty_state.request_title")}
+            </p>
+            <p className="text-sm text-secondary">{t("external_contours_page.empty_state.request_description")}</p>
+          </div>
+
+          <div className="rounded-xl border border-dashed border-subtle bg-surface-1 p-6">
+            <p className="mb-2 text-base font-semibold text-primary">
+              {t("external_contours_page.empty_state.list_title")}
+            </p>
+            <p className="text-sm text-secondary">{t("external_contours_page.empty_state.list_description")}</p>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default observer(ProjectExternalContoursPage);