52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Stack, Typography } from "@mui/material";
|
|
import { useShow } from "@refinedev/core";
|
|
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
|
|
import { TOKEN_KEY } from "@providers";
|
|
|
|
export const CityShow = () => {
|
|
const { query } = useShow({});
|
|
const { data, isLoading } = query;
|
|
|
|
const record = data?.data;
|
|
|
|
const fields = [
|
|
// {label: 'ID', data: 'id'},
|
|
{ label: "Название", data: "name" },
|
|
// {label: 'Код страны', data: 'country_code'},
|
|
{ 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 }) => (
|
|
<Stack key={data} gap={1}>
|
|
<Typography variant="body1" fontWeight="bold">
|
|
{label}
|
|
</Typography>
|
|
|
|
{render ? (
|
|
render(record?.[data])
|
|
) : (
|
|
<TextField value={record?.[data]} />
|
|
)}
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Show>
|
|
);
|
|
};
|