56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
|
|
import {
|
|
AsyncSurface,
|
|
DetailPage,
|
|
} from "../../../presentation/design-system/index.js";
|
|
import { useRouteInput } from "../../../presentation/routes/app-router.js";
|
|
import { useLocale } from "../../../presentation/i18n/index.js";
|
|
import { useReferenceDetail } from "./use-reference-feature.js";
|
|
|
|
export default function ReferenceResourceDetailPage() {
|
|
const { date, message } = useLocale();
|
|
const route = useRouteInput();
|
|
const resourceId = String(route.params.resourceId);
|
|
const { query } = useReferenceDetail(resourceId);
|
|
const resource = query.data;
|
|
|
|
return (
|
|
<DetailPage
|
|
key={resourceId}
|
|
breadcrumb={
|
|
<Link to="/examples/reference-resources">Reference resources</Link>
|
|
}
|
|
heading={{
|
|
eyebrow: "DetailPage",
|
|
title: resource?.title ?? "Reference detail",
|
|
description: "route param과 detail query의 reset 경계를 확인합니다.",
|
|
}}
|
|
metadata={
|
|
resource ? (
|
|
<dl>
|
|
<dt>Resource ID</dt>
|
|
<dd>{resource.resourceId}</dd>
|
|
<dt>Created</dt>
|
|
<dd>
|
|
{resource.createdAt
|
|
? date(new Date(resource.createdAt))
|
|
: message("common.noDisplayValue")}
|
|
</dd>
|
|
</dl>
|
|
) : (
|
|
<p>요약 정보를 준비하고 있습니다.</p>
|
|
)
|
|
}
|
|
feedback={
|
|
<AsyncSurface state={query.state} onRetry={query.retry}>
|
|
{resource ? (
|
|
<p>이 영역에는 제품별 상세 section을 조립할 수 있습니다.</p>
|
|
) : null}
|
|
</AsyncSurface>
|
|
}
|
|
aside={<p>상세 페이지의 관련 정보 slot입니다.</p>}
|
|
/>
|
|
);
|
|
}
|