35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import {Stack, Typography} from '@mui/material'
|
|
import {useShow} from '@refinedev/core'
|
|
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
|
|
|
|
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={`https://wn.krbl.ru/media/${value}/download`} 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>
|
|
)
|
|
}
|