mirror of
https://github.com/supabase/supabase.git
synced 2026-06-08 02:25:04 +08:00
f0afc5948b
Adjusts layout / page patterns including design system documentation and page components. <img width="937" height="643" alt="image" src="https://github.com/user-attachments/assets/5f7864a3-04ae-4ccf-b2b8-d9fe5e29554e" /> **To test** - Ensure all existing page types in Studio are un-effected. They shouldn't be since existing components aren't touched. - Run design-system and have a read through layout and page header documentation. Make sure you understand when and where to use the various combinations of page components and their variants. **Next** Once we are happy with these patterns we can gradually start to update Studio pages that make use of breadcrumbs and/or sub navigation. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added PageBreadcrumbs and PageNav page chrome * Several new interactive layout examples (Auth Emails, Edge Functions, Full‑Width, Logs) and demo pages * **Documentation** * New docs for PageBreadcrumbs and PageNav * Reworked layout guidance and patterns; updated fragment/example docs and usage notes * **Improvements** * Component preview now supports explicit padding control * Simplified page header demo and updated previews <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46126?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
66 lines
2.7 KiB
Plaintext
66 lines
2.7 KiB
Plaintext
---
|
|
title: Page Header
|
|
description: A compound component for page title, description, and actions.
|
|
fragment: true
|
|
---
|
|
|
|
Compound header for page context: optional icon, title, description, and aside actions. Breadcrumbs and sub navigation use [Page Breadcrumbs](./page-breadcrumbs) and [Page Nav](./page-nav) as siblings above this component — see [Layout patterns](../ui-patterns/layout).
|
|
|
|
<ComponentPreview
|
|
name="page-header-demo"
|
|
description="Title, description, icon, and aside actions"
|
|
align="start"
|
|
className="p-0"
|
|
padded={false}
|
|
peekCode
|
|
wide
|
|
/>
|
|
|
|
## Quick reference
|
|
|
|
| Piece | Role |
|
|
| ----------------------- | ---------------------------------------------------------------------------- |
|
|
| `PageHeaderMeta` | Wrapper for icon, summary, and aside — use when the page needs a title block |
|
|
| `PageHeaderIcon` | Optional icon to the left of the summary |
|
|
| `PageHeaderSummary` | Groups `PageHeaderTitle` and `PageHeaderDescription` |
|
|
| `PageHeaderTitle` | Page heading (`h1`) |
|
|
| `PageHeaderDescription` | Supporting text below the title |
|
|
| `PageHeaderAside` | Page-level actions when there is no filter row above a table |
|
|
|
|
**Sizes:** `small`, `default`, `large`, `full` — passed to `PageHeader` and applied to the meta container width.
|
|
|
|
## Example
|
|
|
|
```tsx
|
|
<PageHeader size="default">
|
|
<PageHeaderMeta>
|
|
<PageHeaderIcon>
|
|
<Card className="flex h-14 w-14 shrink-0 items-center justify-center">
|
|
<Database className="h-5 w-5" />
|
|
</Card>
|
|
</PageHeaderIcon>
|
|
<PageHeaderSummary>
|
|
<PageHeaderTitle>Templates</PageHeaderTitle>
|
|
<PageHeaderDescription>Manage email templates for your project.</PageHeaderDescription>
|
|
</PageHeaderSummary>
|
|
<PageHeaderAside>
|
|
<Button type="primary" size="tiny">
|
|
Create template
|
|
</Button>
|
|
</PageHeaderAside>
|
|
</PageHeaderMeta>
|
|
</PageHeader>
|
|
```
|
|
|
|
## Sub-components
|
|
|
|
- `PageHeader` — root; `size` variants: `small`, `default`, `large`, `full`
|
|
- `PageHeaderMeta` — groups icon, summary, and aside
|
|
- `PageHeaderIcon` — optional icon (inside `PageHeaderMeta`)
|
|
- `PageHeaderSummary` — title and description (inside `PageHeaderMeta`)
|
|
- `PageHeaderTitle` — page heading (`h1`)
|
|
- `PageHeaderDescription` — supporting text
|
|
- `PageHeaderAside` — actions when meta is shown
|
|
|
|
Legacy sub-components `PageHeaderBreadcrumb` and `PageHeaderNavigationTabs` remain for existing pages; prefer [Page Breadcrumbs](./page-breadcrumbs) and [Page Nav](./page-nav) for new work.
|