Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion config-ui/src/components/page-header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,11 @@ interface Props {
path: string;
}>;
extra?: React.ReactNode;
description?: string;
children: React.ReactNode;
}

export const PageHeader = ({ breadcrumbs, extra, children }: Props) => {
export const PageHeader = ({ breadcrumbs, extra, description, children }: Props) => {
return (
<S.Container>
<S.Title>
Expand All @@ -46,6 +47,7 @@ export const PageHeader = ({ breadcrumbs, extra, children }: Props) => {
</S.Breadcrumbs>
<S.Extra>{extra}</S.Extra>
</S.Title>
<S.Description>{description}</S.Description>
<S.Content>{children}</S.Content>
</S.Container>
);
Expand Down
4 changes: 4 additions & 0 deletions config-ui/src/components/page-header/styled.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ export const Title = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;

export const Description = styled.p`
margin-top: 12px;
margin-bottom: 36px;
`;

Expand Down
12 changes: 6 additions & 6 deletions config-ui/src/routes/blueprint/home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,14 @@ export const BlueprintHomePage = () => {
{ name: 'Advanced', path: PATHS.BLUEPRINTS() },
{ name: 'Blueprints', path: PATHS.BLUEPRINTS() },
]}
extra={
<Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
New Blueprint
</Button>
}
description="This is a complete list of all Blueprints you have created, whether they belong to Projects or not."
>
<Flex vertical gap="middle">
<p style={{ margin: 0 }}>
This is a complete list of all Blueprints you have created, whether they belong to Projects or not.
</p>
<Flex justify="space-between">
<Radio.Group optionType="button" value={type} onChange={({ target: { value } }) => setType(value)}>
<Radio value="all">All</Radio>
Expand All @@ -108,9 +111,6 @@ export const BlueprintHomePage = () => {
</Radio>
))}
</Radio.Group>
<Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
New Blueprint
</Button>
</Flex>
<Table
rowKey="id"
Expand Down