init /media route

src/pages/media/show.tsx

@@ -0,0 +1,39 @@
+import {Stack, Typography} from '@mui/material'
+import {useShow} from '@refinedev/core'
+import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
+
+export const MediaShow = () => {
+  const {query} = useShow({})
+  const {data, isLoading} = query
+
+  const record = data?.data
+
+  return (
+    <Show isLoading={isLoading}>
+      <Stack gap={4}>
+        {record && <img src={`https://wn.krbl.ru/media/${record?.id}/download`} alt={record?.filename} style={{maxWidth: '100%', height: '40vh', objectFit: 'contain', borderRadius: 8}} />}
+
+        <Stack gap={1}>
+          <Typography variant="body1" fontWeight="bold">
+            {'File name'}
+          </Typography>
+          <TextField value={record?.filename} />
+        </Stack>
+
+        <Stack gap={1}>
+          <Typography variant="body1" fontWeight="bold">
+            {'Media Type'}
+          </Typography>
+          <TextField value={record?.media_type} />
+        </Stack>
+
+        <Stack gap={1}>
+          <Typography variant="body1" fontWeight="bold">
+            {'ID'}
+          </Typography>
+          <TextField value={record?.id} />
+        </Stack>
+      </Stack>
+    </Show>
+  )
+}