@wener/console
Version:
Base console UI toolkit
88 lines (87 loc) • 3.05 kB
JavaScript
import React from "react";
import { AppearanceSettingPage } from "./AppearanceSettingPage.js";
var meta = {
title: "pages/AppearanceSettingPage",
component: AppearanceSettingPage.Composite,
parameters: {
layout: "fullscreen"
},
tags: [
"autodocs"
],
decorators: [
function (Story) {
return /*#__PURE__*/ React.createElement("div", {
className: "h-screen"
}, /*#__PURE__*/ React.createElement(Story, null));
}
]
};
export default meta;
export var Default = {
args: {}
};
export var WithChildren = {
args: {
children: /*#__PURE__*/ React.createElement("div", {
className: "rounded-lg border p-4 text-sm shadow"
}, /*#__PURE__*/ React.createElement("p", null, "Additional content goes here"))
}
};
// Stories for individual components
export var LayoutStory = {
render: function () {
return /*#__PURE__*/ React.createElement(AppearanceSettingPage.Layout, {
title: "Custom Title",
action: /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm"
}, "Action")
}, /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("p", null, "Layout content goes here")));
}
};
export var HeaderStory = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement(AppearanceSettingPage.Header, null));
}
};
export var HeaderWithCustomTitleStory = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement(AppearanceSettingPage.Header, {
title: "Custom Theme Settings"
}));
}
};
export var ThemeSelectorStory = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement(AppearanceSettingPage.ThemeSelector, null));
}
};
export var PreviewStory = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement(AppearanceSettingPage.Preview, null));
}
};
export var CustomLayoutStory = {
render: function () {
return /*#__PURE__*/ React.createElement(AppearanceSettingPage.Layout, {
title: /*#__PURE__*/ React.createElement(AppearanceSettingPage.Header, {
title: "Custom Appearance"
}),
action: /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm"
}, "Save")
}, /*#__PURE__*/ React.createElement(AppearanceSettingPage.ThemeSelector, null), /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "Preview"), /*#__PURE__*/ React.createElement(AppearanceSettingPage.Preview, null));
}
};