74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import { Stack, Typography, Box, Button } from "@mui/material";
|
||
import { useShow } from "@refinedev/core";
|
||
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
|
||
import { MEDIA_TYPES } from "@lib";
|
||
import { TOKEN_KEY } from "@providers";
|
||
import { MediaData, MediaView } from "@ui";
|
||
|
||
export const MediaShow = () => {
|
||
const { query } = useShow({});
|
||
const { data, isLoading } = query;
|
||
|
||
const record = data?.data;
|
||
const token = localStorage.getItem(TOKEN_KEY);
|
||
|
||
const fields = [
|
||
// {label: 'Название файла', data: 'filename'},
|
||
{ label: "Название", data: "media_name" },
|
||
{
|
||
label: "Тип",
|
||
data: "media_type",
|
||
render: (value: number) =>
|
||
MEDIA_TYPES.find((type) => type.value === value)?.label || value,
|
||
},
|
||
// {label: 'ID', data: 'id'},
|
||
];
|
||
|
||
return (
|
||
<Show isLoading={isLoading}>
|
||
<Stack gap={4}>
|
||
<MediaView media={record as MediaData} />
|
||
{fields.map(({ label, data, render }) => (
|
||
<Stack key={data} gap={1}>
|
||
<Typography variant="body1" fontWeight="bold">
|
||
{label}
|
||
</Typography>
|
||
<TextField
|
||
value={render ? render(record?.[data]) : record?.[data]}
|
||
/>
|
||
</Stack>
|
||
))}
|
||
<Box
|
||
sx={{
|
||
p: 2,
|
||
border: "1px solid text.pimary",
|
||
borderRadius: 2,
|
||
bgcolor: "primary.light",
|
||
width: "fit-content",
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="body1"
|
||
gutterBottom
|
||
sx={{
|
||
color: "#FFFFFF",
|
||
}}
|
||
>
|
||
Доступно для скачивания по ссылке:
|
||
</Typography>
|
||
<Button
|
||
variant="contained"
|
||
href={`${import.meta.env.VITE_KRBL_MEDIA}${
|
||
record?.id
|
||
}/download?token=${token}`}
|
||
target="_blank"
|
||
sx={{ mt: 1, width: "100%" }}
|
||
>
|
||
Скачать медиа
|
||
</Button>
|
||
</Box>
|
||
</Stack>
|
||
</Show>
|
||
);
|
||
};
|