[2] add show page for other routes

src/pages/sight/index.ts

@@ -1,3 +1,4 @@
 export * from './create'
 export * from './edit'
 export * from './list'
+export * from './show'

src/pages/sight/list.tsx

@@ -1,5 +1,5 @@
 import {DataGrid, type GridColDef} from '@mui/x-data-grid'
-import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
+import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
 import React from 'react'
 
 export const SightList = () => {
@@ -60,13 +60,14 @@ export const SightList = () => {
         headerName: 'Actions',
         align: 'right',
         headerAlign: 'center',
-        minWidth: 100,
+        minWidth: 120,
         sortable: false,
         display: 'flex',
         renderCell: function render({row}) {
           return (
             <>
               <EditButton hideText recordItemId={row.id} />
+              <ShowButton hideText recordItemId={row.id} />
               <DeleteButton hideText recordItemId={row.id} />
             </>
           )

src/pages/sight/show.tsx

@@ -0,0 +1,33 @@
+import {Stack, Typography} from '@mui/material'
+import {useShow} from '@refinedev/core'
+import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+
+export const SightShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  const fields = [
+    {label: 'ID', data: 'id'},
+    {label: 'Name', data: 'name'},
+    {label: 'Latitude', data: 'latitude'},
+    {label: 'Longitude', data: 'longitude'},
+    {label: 'City ID', data: 'city_id'},
+  ]
+
+  return (
+    <Show isLoading={isLoading}>
+      <Stack gap={4}>
+        {fields.map(({label, data}) => (
+          <Stack key={data} gap={1}>
+            <Typography variant="body1" fontWeight="bold">
+              {label}
+            </Typography>
+            <TextField value={record?.[data]} />
+          </Stack>
+        ))}
+      </Stack>
+    </Show>
+  )
+}