-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only
import { Pencil2Icon, TrashIcon } from "@radix-ui/react-icons";
import { Button, IconButton } from "@radix-ui/themes";
import type { Meta, StoryObj } from "@storybook/react";
import * as NavigationMenu from "./NavigationMenu.ts";
import { WorkspacePagesLayout } from "./WorkspacePagesLayout.tsx";
export default {
component: WorkspacePagesLayout,
args: {
title: "TITLE",
menu: (
<NavigationMenu.Root>
<NavigationMenu.Group title="グループ">
<NavigationMenu.Item current>
<button>アイテム1</button>
</NavigationMenu.Item>
<NavigationMenu.Item>
<button>アイテム2</button>
</NavigationMenu.Item>
<NavigationMenu.Item>
<button>アイテム3</button>
</NavigationMenu.Item>
</NavigationMenu.Group>
</NavigationMenu.Root>
),
children: "CHILDREN",
},
parameters: {
layout: "fullscreen",
},
} satisfies Meta<typeof WorkspacePagesLayout>;
type Story = StoryObj<typeof WorkspacePagesLayout>;
export const Defaults: Story = {};
export const MenuOpened: Story = {
args: {
defaultMenuOpened: true,
},
};
export const WithTextAction: Story = {
args: {
actions: <Button>保存</Button>,
},
};
export const WithIconActions: Story = {
args: {
actions: (
<>
<IconButton variant="surface">
<TrashIcon />
</IconButton>
<IconButton variant="surface">
<Pencil2Icon />
</IconButton>
</>
),
},
};