created Components directory

src/App.tsx

@@ -7,13 +7,13 @@ import {
 } from "react-admin";
 //import { Layout } from "./Layout";//
 import { dataProvider } from "./dataProvider";
-import {UserList} from "./Users.tsx";
+import {UserList} from "./Components/Users.tsx";
-import {UserEdit} from "./UserEdit.tsx";
+import {UserEdit} from "./Components/UserEdit.tsx";
-import {PostEdit} from "./PostEdit.tsx";
+import {PostEdit} from "./Components/PostEdit.tsx";
-import {CommentEdit} from "./CommentEdit.tsx";
+import {CommentEdit} from "./Components/CommentEdit.tsx";
-import {AlbumEdit} from "./AlbumEdit.tsx";
+import {AlbumEdit} from "./Components/AlbumEdit.tsx";
-import {PhotoEdit} from "./PhotoEdit.tsx";
+import {PhotoEdit} from "./Components/PhotoEdit.tsx";
-import {MyLayout} from "./MyLayout.tsx";
+import {MyLayout} from "./Components/MyLayout.tsx";
 
 export const App = () => (
   <Admin layout={MyLayout} dataProvider={dataProvider}>

src/Components/MyAppBar.tsx

@@ -1,9 +1,10 @@
 import {AppBar} from "react-admin";
+import {yellow} from "@mui/material/colors";
 
 export const MyAppBar = () => (
     <AppBar
         sx = {{
-            backgroundColor: "#ffeb3b",
+            backgroundColor: yellow[500],
         }}
     />
 );

src/Components/MyLayout.tsx

@@ -0,0 +1,8 @@
+import {Layout} from 'react-admin';
+import {MyAppBar} from "./MyAppBar.tsx";
+
+export const MyLayout = ({ children } ) => (
+    <Layout appBar={MyAppBar} >
+    {children}
+    </Layout>
+);

src/MyLayout.tsx

@@ -1,7 +0,0 @@
-import {Layout} from 'react-admin';
-import {MyAppBar} from "./MyAppBar";
-
-export const MyLayout = ({ children } ) => (<Layout appBar={MyAppBar} >
-    {children}
-    </Layout>
-    );