115 lines
2.8 KiB
TypeScript
115 lines
2.8 KiB
TypeScript
import { Box, Stack, Typography } from "@mui/material";
|
|
import { useShow } from "@refinedev/core";
|
|
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
|
|
import { TOKEN_KEY } from "../../authProvider";
|
|
|
|
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={`${
|
|
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>
|
|
);
|
|
};
|