mokkenstorm.dev
because I got bored of customising my CV for every job
1import { PageHeader, Button } from "@cv/ui";
2
3# PageHeader
4
5A page header component for consistent page titles, descriptions, and action buttons.
6
7## Features
8
9- **Title and description**: Main title with optional description
10- **Action slot**: Optional action button area
11- **Consistent spacing**: Standardized margin and layout
12- **Flexible layout**: Responsive flex layout
13
14## Basic Usage
15
16```tsx
17import { PageHeader } from "@cv/ui";
18import { Button } from "@cv/ui";
19
20function MyPage() {
21 return (
22 <PageHeader title="My Page" description="This is the page description" />
23 );
24}
25```
26
27## With Action Button
28
29```tsx
30<PageHeader
31 title="Users"
32 description="Manage user accounts"
33 action={
34 <Button onClick={() => {}}>Create User</Button>
35 }
36/>
37```
38
39## Title Only
40
41```tsx
42<PageHeader title="Dashboard" />
43```
44
45## Custom Styling
46
47```tsx
48<PageHeader
49 title="Settings"
50 description="Configure your preferences"
51 className="mb-8"
52/>
53```
54
55## Props
56
57| Prop | Type | Default | Description |
58| ------------- | ----------- | ------------ | -------------------------------------- |
59| `title` | `string` | **required** | Page title |
60| `description` | `string` | `undefined` | Optional description text |
61| `action` | `ReactNode` | `undefined` | Optional action element (e.g., button) |
62| `className` | `string` | `undefined` | Additional CSS classes |
63
64## Layout
65
66The component uses a flex layout:
67
68- **Left side**: Title and description (stacked vertically)
69- **Right side**: Action element (if provided)
70- **Spacing**: `mb-6` default margin bottom
71
72## Styling
73
74- Title: `text-2xl font-bold text-ctp-text`
75- Description: `text-ctp-subtext0 mt-1`