48 lines
2.1 KiB
TypeScript
48 lines
2.1 KiB
TypeScript
import { Card, Typography } from 'antd';
|
|
import { useMemo } from 'react';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { ComponentSamplesLayout } from '../../../features/layout/component-sample-gallery';
|
|
import { SampleWidgetsLayout } from '../../../features/layout/widget-sample-gallery';
|
|
import { useMainLayoutContext } from '../layout/MainLayoutContext';
|
|
import { readPreviewTargetDescriptorFromUrl } from '../previewRuntime';
|
|
|
|
const { Paragraph } = Typography;
|
|
const HIDDEN_COMPONENT_IDS = ['search-command-modal', 'window-ui'];
|
|
|
|
export function ApisPage() {
|
|
const location = useLocation();
|
|
const { selectedApiMenu, componentSampleEntries, widgetSampleEntries } = useMainLayoutContext();
|
|
const previewTarget = useMemo(() => readPreviewTargetDescriptorFromUrl(), [location.search]);
|
|
const isSingleWidgetPreview = selectedApiMenu === 'widgets' && previewTarget?.type === 'widget';
|
|
|
|
return (
|
|
<div className={`app-main-panel${isSingleWidgetPreview ? ' app-main-panel--widget-preview' : ''}`}>
|
|
<Card
|
|
title={selectedApiMenu === 'components' ? 'APIs / Components' : 'APIs / Widgets'}
|
|
className={`app-main-card${isSingleWidgetPreview ? ' app-main-card--widget-preview' : ''}`}
|
|
bordered={false}
|
|
>
|
|
{isSingleWidgetPreview ? null : (
|
|
<Paragraph className="app-main-copy">
|
|
{selectedApiMenu === 'components'
|
|
? '공통 UI 컴포넌트 샘플과 확장 샘플을 확인합니다.'
|
|
: '공통 위젯 샘플을 확인합니다.'}
|
|
</Paragraph>
|
|
)}
|
|
|
|
{selectedApiMenu === 'components' ? (
|
|
<ComponentSamplesLayout entries={componentSampleEntries} excludeComponentIds={HIDDEN_COMPONENT_IDS} />
|
|
) : (
|
|
<SampleWidgetsLayout
|
|
entries={widgetSampleEntries}
|
|
includeComponentIds={isSingleWidgetPreview ? [previewTarget.componentId] : []}
|
|
includeSampleIds={isSingleWidgetPreview && previewTarget.sampleId ? [previewTarget.sampleId] : []}
|
|
disableWidgetCardWrapper={isSingleWidgetPreview}
|
|
singlePreviewMode={isSingleWidgetPreview}
|
|
/>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|