1export const WithHeaderAndFooter = component(() => (
2 <Stack direction="vertical" gap="lg">
3 <Panel
4 slots={{
5 header: (
6 <DemoHeader>
7 <span class="title">Base Panel with Header</span>
8 <div class="actions">
9 <Button size="sm">Action</Button>
10 </div>
11 </DemoHeader>
12 ),
13 footer: (
14 <Stack direction="horizontal" gap="sm" justify="end">
15 <Button variant="ghost">Cancel</Button>
16 <Button variant="primary">Save</Button>
17 </Stack>
18 ),
19 }}
20 >
21 <DemoBlock>Panel with base variant header and footer</DemoBlock>
22 </Panel>
23
24 <Panel
25 variant="light"
26 slots={{
27 header: (
28 <DemoHeader>
29 <span class="title">Light Panel with Header</span>
30 </DemoHeader>
31 ),
32 footer: (
33 <Stack direction="horizontal" gap="sm" justify="end">
34 <Button variant="ghost">Close</Button>
35 </Stack>
36 ),
37 }}
38 >
39 <DemoBlock>Panel with light variant header and footer</DemoBlock>
40 </Panel>
41
42 <Panel
43 variant="dark"
44 slots={{
45 header: (
46 <DemoHeader>
47 <span class="title">Dark Panel with Header</span>
48 <div class="actions">
49 <Button size="sm" variant="ghost">Settings</Button>
50 </div>
51 </DemoHeader>
52 ),
53 }}
54 >
55 <DemoBlock>Panel with dark variant header</DemoBlock>
56 </Panel>
57 </Stack>
58));