abstract urls

src/pages/city/show.tsx

@@ -1,35 +1,51 @@
-import {Stack, Typography} from '@mui/material'
-import {useShow} from '@refinedev/core'
-import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
-import {TOKEN_KEY} from '../../authProvider'
+import { Stack, Typography } from "@mui/material";
+import { useShow } from "@refinedev/core";
+import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
+import { TOKEN_KEY } from "../../authProvider";
 
 export const CityShow = () => {
-  const {query} = useShow({})
-  const {data, isLoading} = query
+  const { query } = useShow({});
+  const { data, isLoading } = query;
 
-  const record = data?.data
+  const record = data?.data;
 
   const fields = [
     // {label: 'ID', data: 'id'},
-    {label: 'Название', data: 'name'},
+    { label: "Название", data: "name" },
     // {label: 'Код страны', data: 'country_code'},
-    {label: 'Страна', data: 'country'},
-    {label: 'Герб', data: 'arms', render: (value: number) => <img src={`https://wn.krbl.ru/media/${value}/download?token=${localStorage.getItem(TOKEN_KEY)}`} alt={String(value)} style={{maxWidth: '10%', objectFit: 'contain', borderRadius: 8}} />},
-  ]
+    { label: "Страна", data: "country" },
+    {
+      label: "Герб",
+      data: "arms",
+      render: (value: number) => (
+        <img
+          src={`${
+            import.meta.env.VITE_KRBL_MEDIA
+          }${value}/download?token=${localStorage.getItem(TOKEN_KEY)}`}
+          alt={String(value)}
+          style={{ maxWidth: "10%", objectFit: "contain", borderRadius: 8 }}
+        />
+      ),
+    },
+  ];
 
   return (
     <Show isLoading={isLoading}>
       <Stack gap={4}>
-        {fields.map(({label, data, render}) => (
+        {fields.map(({ label, data, render }) => (
           <Stack key={data} gap={1}>
             <Typography variant="body1" fontWeight="bold">
               {label}
             </Typography>
 
-            {render ? render(record?.[data]) : <TextField value={record?.[data]} />}
+            {render ? (
+              render(record?.[data])
+            ) : (
+              <TextField value={record?.[data]} />
+            )}
           </Stack>
         ))}
       </Stack>
     </Show>
-  )
-}
+  );
+};