@wener/console
Version:
Base console UI toolkit
84 lines (83 loc) • 5.5 kB
JavaScript
import React from "react";
import { DaisyDrawer } from "./DaisyDrawer.js";
var meta = {
title: "daisy/DaisyDrawer",
component: DaisyDrawer.Root,
parameters: {
layout: "centered"
},
tags: [
"autodocs"
]
};
export default meta;
export var Basic = {
render: function () {
return /*#__PURE__*/ React.createElement(DaisyDrawer.Root, null, /*#__PURE__*/ React.createElement(DaisyDrawer.Trigger, {
className: "btn btn-primary"
}, "Open Drawer"), /*#__PURE__*/ React.createElement(DaisyDrawer.Portal, null, /*#__PURE__*/ React.createElement(DaisyDrawer.Overlay, null), /*#__PURE__*/ React.createElement(DaisyDrawer.Content, null, /*#__PURE__*/ React.createElement(DaisyDrawer.Title, null, "Drawer Title"), /*#__PURE__*/ React.createElement(DaisyDrawer.Description, null, "This is a description of the drawer content."), /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("p", null, "This is the main content of the drawer."), /*#__PURE__*/ React.createElement("p", null, "It slides in from the right side of the screen.")))));
}
};
export var WithCustomContent = {
render: function () {
return /*#__PURE__*/ React.createElement(DaisyDrawer.Root, null, /*#__PURE__*/ React.createElement(DaisyDrawer.Trigger, {
className: "btn btn-secondary"
}, "Open Settings"), /*#__PURE__*/ React.createElement(DaisyDrawer.Portal, null, /*#__PURE__*/ React.createElement(DaisyDrawer.Overlay, null), /*#__PURE__*/ React.createElement(DaisyDrawer.Content, {
className: "w-80"
}, /*#__PURE__*/ React.createElement(DaisyDrawer.Title, null, "Settings"), /*#__PURE__*/ React.createElement("div", {
className: "space-y-4 p-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "form-control"
}, /*#__PURE__*/ React.createElement("label", {
className: "label"
}, /*#__PURE__*/ React.createElement("span", {
className: "label-text"
}, "Theme")), /*#__PURE__*/ React.createElement("select", {
className: "select select-bordered w-full"
}, /*#__PURE__*/ React.createElement("option", null, "Light"), /*#__PURE__*/ React.createElement("option", null, "Dark"), /*#__PURE__*/ React.createElement("option", null, "Auto"))), /*#__PURE__*/ React.createElement("div", {
className: "form-control"
}, /*#__PURE__*/ React.createElement("label", {
className: "label cursor-pointer"
}, /*#__PURE__*/ React.createElement("span", {
className: "label-text"
}, "Enable notifications"), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "toggle toggle-primary",
defaultChecked: true
}))), /*#__PURE__*/ React.createElement("div", {
className: "form-control"
}, /*#__PURE__*/ React.createElement("label", {
className: "label cursor-pointer"
}, /*#__PURE__*/ React.createElement("span", {
className: "label-text"
}, "Auto-save"), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "toggle toggle-secondary"
}))), /*#__PURE__*/ React.createElement("div", {
className: "flex gap-2 pt-4"
}, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-primary flex-1"
}, "Save"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-ghost flex-1"
}, "Cancel"))))));
}
};
export var Navigation = {
render: function () {
return /*#__PURE__*/ React.createElement(DaisyDrawer.Root, null, /*#__PURE__*/ React.createElement(DaisyDrawer.Trigger, {
className: "btn btn-outline"
}, "Menu"), /*#__PURE__*/ React.createElement(DaisyDrawer.Portal, null, /*#__PURE__*/ React.createElement(DaisyDrawer.Overlay, null), /*#__PURE__*/ React.createElement(DaisyDrawer.Content, {
className: "w-64"
}, /*#__PURE__*/ React.createElement(DaisyDrawer.Title, null, "Navigation"), /*#__PURE__*/ React.createElement("nav", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("ul", {
className: "menu w-full"
}, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Dashboard")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Projects")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Tasks")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Team")), /*#__PURE__*/ React.createElement("li", {
className: "menu-title"
}, "Settings"), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Profile")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Account")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Billing")), /*#__PURE__*/ React.createElement("li", {
className: "menu-title"
}, "Support"), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Help Center")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", null, "Contact")))))));
}
};