63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { Stack, Typography } from "@mui/material";
|
|
import { useOne, useShow } from "@refinedev/core";
|
|
import {
|
|
DateField,
|
|
MarkdownField,
|
|
Show,
|
|
TextFieldComponent as TextField,
|
|
} from "@refinedev/mui";
|
|
|
|
export default function BlogPostShow() {
|
|
const { result: record, query } = useShow({});
|
|
|
|
const { isLoading } = query;
|
|
|
|
const {
|
|
result: category,
|
|
query: { isLoading: categoryIsLoading },
|
|
} = useOne({
|
|
resource: "categories",
|
|
id: record?.category?.id || "",
|
|
queryOptions: {
|
|
enabled: !!record,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<Show isLoading={isLoading}>
|
|
<Stack gap={1}>
|
|
<Typography variant="body1" fontWeight="bold">
|
|
{"ID"}
|
|
</Typography>
|
|
<TextField value={record?.id} />
|
|
|
|
<Typography variant="body1" fontWeight="bold">
|
|
{"Title"}
|
|
</Typography>
|
|
<TextField value={record?.title} />
|
|
|
|
<Typography variant="body1" fontWeight="bold">
|
|
{"Content"}
|
|
</Typography>
|
|
<MarkdownField value={record?.content} />
|
|
|
|
<Typography variant="body1" fontWeight="bold">
|
|
{"Category"}
|
|
</Typography>
|
|
{categoryIsLoading ? <>Loading...</> : <>{category?.title}</>}
|
|
<Typography variant="body1" fontWeight="bold">
|
|
{"Status"}
|
|
</Typography>
|
|
<TextField value={record?.status} />
|
|
|
|
<Typography variant="body1" fontWeight="bold">
|
|
{"CreatedAt"}
|
|
</Typography>
|
|
<DateField value={record?.createdAt} />
|
|
</Stack>
|
|
</Show>
|
|
);
|
|
}
|