first commit

src/component/Frame/NavBar/NavBarMainActions.tsx

@@ -0,0 +1,32 @@
+import { CSSTransition, SwitchTransition } from "react-transition-group";
+import { useAppSelector } from "../../../redux/hooks.ts";
+import { useMemo } from "react";
+import { Box } from "@mui/material";
+import SearchBar from "./SearchBar.tsx";
+import FileSelectedActions from "./FileSelectedActions.tsx";
+import { FileManagerIndex } from "../../FileManager/FileManager.tsx";
+
+const NavBarMainActions = () => {
+  const selected = useAppSelector((state) => state.fileManager[FileManagerIndex.main].selected);
+  const targets = useMemo(() => {
+    return Object.keys(selected).map((key) => selected[key]);
+  }, [selected]);
+  return (
+    <>
+      <SwitchTransition>
+        <CSSTransition
+          addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
+          classNames="fade"
+          key={`${targets.length > 0}`}
+        >
+          <Box sx={{ height: "100%" }}>
+            {targets.length == 0 && <SearchBar />}
+            {targets.length > 0 && <FileSelectedActions targets={targets} />}
+          </Box>
+        </CSSTransition>
+      </SwitchTransition>
+    </>
+  );
+};
+
+export default NavBarMainActions;