@wener/console
Version:
Base console UI toolkit
147 lines (146 loc) • 4.91 kB
JavaScript
import React from "react";
import { DaisyTabs } from "./DaisyTabs.js";
var meta = {
title: "daisy/DaisyTabs",
component: DaisyTabs.Composite,
parameters: {
layout: "centered"
},
tags: [
"autodocs"
]
};
export default meta;
var basicTabs = [
{
key: "tab1",
label: "Tab 1",
content: /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("p", null, "Content for Tab 1"), /*#__PURE__*/ React.createElement("p", null, "This is the first tab content."))
},
{
key: "tab2",
label: "Tab 2",
content: /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("p", null, "Content for Tab 2"), /*#__PURE__*/ React.createElement("p", null, "This is the second tab content."))
},
{
key: "tab3",
label: "Tab 3",
content: /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("p", null, "Content for Tab 3"), /*#__PURE__*/ React.createElement("p", null, "This is the third tab content."))
}
];
var tabsWithIcons = [
{
key: "home",
label: "Home",
icon: "\uD83C\uDFE0",
content: /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("h3", null, "Home Dashboard"), /*#__PURE__*/ React.createElement("p", null, "Welcome to your dashboard!"))
},
{
key: "settings",
label: "Settings",
icon: "\u2699\uFE0F",
content: /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("h3", null, "Settings"), /*#__PURE__*/ React.createElement("p", null, "Configure your preferences here."))
},
{
key: "profile",
label: "Profile",
icon: "\uD83D\uDC64",
content: /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("h3", null, "User Profile"), /*#__PURE__*/ React.createElement("p", null, "Manage your profile information."))
}
];
export var Basic = {
args: {
tabs: basicTabs,
defaultValue: "tab1"
}
};
export var WithIcons = {
args: {
tabs: tabsWithIcons,
defaultValue: "home"
}
};
export var Boxed = {
args: {
tabs: basicTabs,
variant: "boxed",
defaultValue: "tab1"
}
};
export var Bordered = {
args: {
tabs: basicTabs,
variant: "bordered",
defaultValue: "tab1"
}
};
export var Lifted = {
args: {
tabs: basicTabs,
variant: "lifted",
title: "Page Title",
defaultValue: "tab1"
}
};
export var LiftedWithAction = {
args: {
tabs: basicTabs,
variant: "lifted",
title: "Project Dashboard",
action: /*#__PURE__*/ React.createElement("button", {
className: "btn btn-sm btn-primary"
}, "New"),
defaultValue: "tab1"
}
};
export var Small = {
args: {
tabs: basicTabs,
size: "sm",
variant: "bordered",
defaultValue: "tab1"
}
};
export var Large = {
args: {
tabs: tabsWithIcons,
size: "lg",
variant: "boxed",
defaultValue: "home"
}
};
export var ManualComposition = {
render: function () {
return /*#__PURE__*/ React.createElement(DaisyTabs.Root, {
defaultValue: "manual1",
className: "w-full"
}, /*#__PURE__*/ React.createElement(DaisyTabs.List, null, /*#__PURE__*/ React.createElement(DaisyTabs.Tab, {
value: "manual1"
}, "Manual Tab 1"), /*#__PURE__*/ React.createElement(DaisyTabs.Tab, {
value: "manual2"
}, "Manual Tab 2"), /*#__PURE__*/ React.createElement(DaisyTabs.Tab, {
value: "manual3"
}, "Manual Tab 3")), /*#__PURE__*/ React.createElement(DaisyTabs.Panel, {
value: "manual1",
className: "p-4"
}, /*#__PURE__*/ React.createElement("h3", null, "Manually Composed Tab 1"), /*#__PURE__*/ React.createElement("p", null, "This tab was composed manually using individual components.")), /*#__PURE__*/ React.createElement(DaisyTabs.Panel, {
value: "manual2",
className: "p-4"
}, /*#__PURE__*/ React.createElement("h3", null, "Manually Composed Tab 2"), /*#__PURE__*/ React.createElement("p", null, "Full control over the tab structure and styling.")), /*#__PURE__*/ React.createElement(DaisyTabs.Panel, {
value: "manual3",
className: "p-4"
}, /*#__PURE__*/ React.createElement("h3", null, "Manually Composed Tab 3"), /*#__PURE__*/ React.createElement("p", null, "Perfect for complex layouts and custom content.")));
}
};