refactored into chain editor

src/routes/$namespace/$chainId.tsx

@@ -2,28 +2,13 @@ import { redirect } from "@tanstack/react-router";
 import { requireChains } from "@/entities/chain/lib";
 import { createFileRoute } from "@tanstack/react-router";
 
+import { ChainEditor } from "@/widgets/chain-editor";
 import { useChainState } from "@/entities/chain/model";
-import { Typography } from "@mui/material";
-import { ChainButtons } from "@/widgets/chain-buttons";
 
 function ChainPage() {
   const { chain } = Route.useLoaderData();
 
-  return (
-    <>
-      <div key={chain._id} className="flex items-center justify-between">
-        <Typography
-          variant="h4"
-          sx={{ color: "#4C4E64DE" }}
-          className="select-none"
-        >
-          {chain.name}
-        </Typography>
-
-        <ChainButtons chain={chain} />
-      </div>
-    </>
-  );
+  return <ChainEditor chain={chain} />;
 }
 
 export const Route = createFileRoute("/$namespace/$chainId")({

src/widgets/chain-buttons/index.ts

@@ -1 +0,0 @@
-export { default as ChainButtons } from "./ui/ChainButtons";

src/widgets/chain-buttons/ui/ChainButtons.tsx

@@ -1,16 +0,0 @@
-import type { Chain } from "@/entities/chain/schema";
-import { RenameChainButton } from "@/features/rename-chain";
-import { DeleteChainButton } from "@/features/delete-chain";
-
-interface ChainButtonsProps {
-  chain: Chain;
-}
-
-export default function ChainButtons({ chain }: ChainButtonsProps) {
-  return (
-    <div className="flex items-center gap-x-5">
-      <RenameChainButton chain={chain} />
-      <DeleteChainButton chain={chain} />
-    </div>
-  );
-}

src/widgets/chain-editor/index.ts

@@ -0,0 +1 @@
+export { default as ChainEditor } from "./ui/ChainEditor";

src/widgets/chain-editor/ui/ChainEditor.tsx

@@ -0,0 +1,52 @@
+import type { Chain } from "@/entities/chain/schema";
+
+import { RenameChainButton } from "@/features/rename-chain";
+import { DeleteChainButton } from "@/features/delete-chain";
+
+import { Typography } from "@mui/material";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+
+interface ChainEditorProps {
+  chain: Chain;
+}
+
+export default function ChainEditor({ chain }: ChainEditorProps) {
+  if (!chain.actions || chain.actions.length === 0)
+    return (
+      <>
+        <Breadcrumbs sx={{ fontSize: "24px" }}>
+          <Typography
+            variant="h5"
+            sx={{ color: "#4C4E64DE", opacity: "60%" }}
+            className="select-none"
+          >
+            {chain.name}
+          </Typography>
+          <Typography
+            variant="h5"
+            sx={{ color: "#4C4E64DE", opacity: "87%" }}
+            className="select-none"
+          >
+            Новый пост
+          </Typography>
+        </Breadcrumbs>
+      </>
+    );
+
+  return (
+    <div key={chain._id} className="flex items-center justify-between">
+      <Typography
+        variant="h5"
+        sx={{ color: "#4C4E64DE", opacity: "87%" }}
+        className="select-none"
+      >
+        {chain.name}
+      </Typography>
+
+      <div className="flex items-center gap-x-5">
+        <RenameChainButton chain={chain} />
+        <DeleteChainButton chain={chain} />
+      </div>
+    </div>
+  );
+}