56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
import {Box, Stack, Typography} from '@mui/material'
|
|
import {useShow} from '@refinedev/core'
|
|
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
|
|
|
|
export type FieldType = {
|
|
label: string
|
|
data: any
|
|
render?: (value: any) => React.ReactNode
|
|
}
|
|
|
|
export const CarrierShow = () => {
|
|
const {query} = useShow({})
|
|
const {data, isLoading} = query
|
|
|
|
const record = data?.data
|
|
|
|
const fields: FieldType[] = [
|
|
{label: 'Полное имя', data: 'full_name'},
|
|
{label: 'Короткое имя', data: 'short_name'},
|
|
{label: 'Город', data: 'city'},
|
|
{
|
|
label: 'Основной цвет',
|
|
data: 'main_color',
|
|
render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
|
|
},
|
|
{
|
|
label: 'Цвет левого виджета',
|
|
data: 'left_color',
|
|
render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
|
|
},
|
|
{
|
|
label: 'Цвет правого виджета',
|
|
data: 'right_color',
|
|
render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
|
|
},
|
|
{label: 'Слоган', data: 'slogan'},
|
|
{label: 'Логотип', data: 'logo', 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>
|
|
)
|
|
}
|