changed the structure a little bit - & add some margin to comment's list

src/App.tsx

@@ -1,55 +1,39 @@
-import {
+import { Admin, ListGuesser, Resource, ShowGuesser } from "react-admin";
-  Admin,
-  Resource,
-  ListGuesser,
-  //EditGuesser,//
-  ShowGuesser,
-} from "react-admin";
 //import { Layout } from "./Layout";//
 import { dataProvider } from "./dataProvider";
-import {UserList} from "./Components/Users.tsx";
+import { UserList } from "./Components/users/Users.tsx";
-import {UserEdit} from "./Components/UserEdit.tsx";
+import { UserEdit } from "./Components/users/UserEdit.tsx";
-import {PostEdit} from "./Components/PostEdit.tsx";
+import { PostEdit } from "./Components/PostEdit.tsx";
-import {CommentEdit} from "./Components/CommentEdit.tsx";
+import { CommentEdit } from "./Components/CommentEdit.tsx";
-import {AlbumEdit} from "./Components/AlbumEdit.tsx";
+import { AlbumEdit } from "./Components/AlbumEdit.tsx";
-import {PhotoEdit} from "./Components/PhotoEdit.tsx";
+import { PhotoEdit } from "./Components/PhotoEdit.tsx";
-import {MyLayout} from "./Components/MyLayout.tsx";
+import { MyLayout } from "./Components/MyLayout.tsx";
-import {UserShow} from "./Components/UserShow.tsx";
+import { UserShow } from "./Components/users/UserShow.tsx";
-import {CommentShow} from "./Components/CommentShow.tsx";
+import { CommentShow } from "./Components/CommentShow.tsx";
-import {PostShow} from "./Components/PostShow.tsx";
+import { PostShow } from "./Components/PostShow.tsx";
-import {PostList} from "./Components/PostList.tsx";
+import { PostList } from "./Components/PostList.tsx";
 
 export const App = () => (
   <Admin layout={MyLayout} dataProvider={dataProvider}>
+    <Resource name="users" list={UserList} edit={UserEdit} show={UserShow} />
+    <Resource name="posts" list={PostList} edit={PostEdit} show={PostShow} />
     <Resource
-      name="users"
+      name="comments"
-      list={UserList}
+      list={ListGuesser}
-      edit={UserEdit}
+      edit={CommentEdit}
-      show={UserShow}
+      show={CommentShow}
-      />
-    <Resource
-        name="posts"
-        list={PostList}
-        edit={PostEdit}
-        show={PostShow}
     />
     <Resource
-        name="comments"
+      name="albums"
-        list={ListGuesser}
+      list={ListGuesser}
-        edit={CommentEdit}
+      edit={AlbumEdit}
-        show={CommentShow}
+      show={ShowGuesser}
     />
     <Resource
-        name="albums"
+      name="photos"
-        list={ListGuesser}
+      list={ListGuesser}
-        edit={AlbumEdit}
+      edit={PhotoEdit}
-        show={ShowGuesser}
+      show={ShowGuesser}
-    />
-    <Resource
-        name="photos"
-        list={ListGuesser}
-        edit={PhotoEdit}
-        show={ShowGuesser}
     />
   </Admin>
-);
+);

src/Components/AlbumEdit.tsx

@@ -1,11 +0,0 @@
-import { Edit, ReferenceInput, SimpleForm, TextInput } from 'react-admin';
-
-export const AlbumEdit = () => (
-    <Edit>
-        <SimpleForm>
-            <ReferenceInput source="userId" reference="users" />
-            <TextInput source="id" />
-            <TextInput source="title" />
-        </SimpleForm>
-    </Edit>
-);

src/Components/PostShow.tsx

@@ -1,29 +0,0 @@
-import {
-  ReferenceManyField,
-  Show,
-  TextField,
-  Datagrid,
-  EmailField,
-  SimpleShowLayout,
-  ReferenceField,
-} from "react-admin";
-
-export const PostShow = () => (
-  <Show>
-    <SimpleShowLayout>
-      <ReferenceField source="userId" reference="users" />
-      <TextField source="id" />
-      <TextField source="title" />
-      <TextField source="body" />
-      <ReferenceManyField target="postId" reference="comments">
-        <Datagrid>
-          <TextField source="postId" />
-          <TextField source="name" />
-          <TextField source="id" />
-          <EmailField source="email" />
-          <TextField source="body" />
-        </Datagrid>
-      </ReferenceManyField>
-    </SimpleShowLayout>
-  </Show>
-);

src/components/AlbumEdit.tsx

@@ -0,0 +1,11 @@
+import { Edit, ReferenceInput, SimpleForm, TextInput } from "react-admin";
+
+export const AlbumEdit = () => (
+  <Edit>
+    <SimpleForm>
+      <ReferenceInput source="userId" reference="users" />
+      <TextInput source="id" />
+      <TextInput source="title" />
+    </SimpleForm>
+  </Edit>
+);

src/components/PostShow.tsx

@@ -0,0 +1,31 @@
+import {
+  Datagrid,
+  EmailField,
+  ReferenceField,
+  ReferenceManyField,
+  Show,
+  SimpleShowLayout,
+  TextField,
+} from 'react-admin';
+import { Box } from '@mui/material';
+
+export const PostShow = () => (
+  <Show>
+    <SimpleShowLayout>
+      <ReferenceField source="userId" reference="users" />
+      <TextField source="id" />
+      <TextField source="title" />
+      <TextField source="body" />
+      <Box sx={{ mt: 5 }}>
+        <ReferenceManyField target="postId" reference="comments" sort={{ field: 'id', order: 'ASC' }}>
+          <Datagrid>
+            <TextField source="id" />
+            <TextField source="name" />
+            <EmailField source="email" />
+            <TextField source="body" />
+          </Datagrid>
+        </ReferenceManyField>
+      </Box>
+    </SimpleShowLayout>
+  </Show>
+);