@wener/console
Version:
Base console UI toolkit
402 lines (401 loc) • 16.6 kB
JavaScript
import React from "react";
import { useImmer } from "use-immer";
import { daisy } from "../utils/daisy.js";
export const DaisyThemeDemo = () => {
const [state, update] = useImmer({
size: undefined,
intent: undefined
});
const { size, intent } = state;
const btnEx = daisy("btn", {
size,
intent
});
return /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col justify-center gap-2 py-4"
}, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "dropdown"
}, /*#__PURE__*/ React.createElement("label", {
tabIndex: 0,
className: "btn btn-outline btn-sm m-1"
}, state.size || "Size"), /*#__PURE__*/ React.createElement("ul", {
tabIndex: 0,
className: "menu dropdown-content w-52 rounded-box bg-base-100 p-2 shadow"
}, /*#__PURE__*/ React.createElement("li", {
onClick: () => {
update({
...state,
size: undefined
});
}
}, /*#__PURE__*/ React.createElement("a", null, "Default")), sizes.map((v) => {
return /*#__PURE__*/ React.createElement("li", {
key: v,
onClick: () => {
update({
...state,
size: v
});
}
}, /*#__PURE__*/ React.createElement("a", null, v));
}))), /*#__PURE__*/ React.createElement("div", {
className: "dropdown"
}, /*#__PURE__*/ React.createElement("label", {
tabIndex: 0,
className: `btn btn-outline btn-sm m-1 ${daisy("btn", {
intent
})}`
}, state.intent || "Intent"), /*#__PURE__*/ React.createElement("ul", {
tabIndex: 0,
className: "menu dropdown-content w-52 rounded-box bg-base-100 p-2 shadow"
}, /*#__PURE__*/ React.createElement("li", {
onClick: () => {
update({
...state,
intent: undefined
});
}
}, /*#__PURE__*/ React.createElement("a", null, "Default")), intents.map((v) => {
return /*#__PURE__*/ React.createElement("li", {
key: v,
onClick: () => {
update({
...state,
intent: v
});
}
}, /*#__PURE__*/ React.createElement("a", null, v));
})))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap [&>div]:px-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "button"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, intents.map((v) => /*#__PURE__*/ React.createElement("button", {
key: v,
className: `btn btn-${v} ${daisy("btn", {
size
})}`
}, v))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, sizes.map((v) => /*#__PURE__*/ React.createElement("button", {
key: v,
className: `btn btn-${v} ${daisy("btn", {
intent
})}`
}, v))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("button", {
className: `btn btn-outline ${btnEx}`
}, "outline"), /*#__PURE__*/ React.createElement("button", {
className: `btn glass ${btnEx}`
}, "glass"), /*#__PURE__*/ React.createElement("button", {
className: `btn btn-ghost ${btnEx}`
}, "ghost"), /*#__PURE__*/ React.createElement("button", {
className: `btn loading ${btnEx}`
}, "loading"), /*#__PURE__*/ React.createElement("button", {
className: `btn btn-link ${btnEx}`
}, "link"), /*#__PURE__*/ React.createElement("button", {
className: `btn btn-active ${btnEx}`
}, "active"), /*#__PURE__*/ React.createElement("button", {
className: `btn btn-disabled ${btnEx}`
}, "disabled"), /*#__PURE__*/ React.createElement("button", {
className: `btn btn-circle ${btnEx}`
}, "C"), /*#__PURE__*/ React.createElement("button", {
className: `btn btn-square ${btnEx}`
}, "S"))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "badge"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "badge"
}, "neutral"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-primary"
}, "primary"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-secondary"
}, "secondary"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-accent"
}, "accent"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-ghost"
}, "ghost"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-info"
}, "info"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-success"
}, "success"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-warning"
}, "warning"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-error"
}, "error")), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "badge badge-lg"
}, "lg"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-md"
}, "md"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-sm"
}, "sm"), /*#__PURE__*/ React.createElement("div", {
className: "badge badge-xs"
}, "xs")), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "badge badge-outline"
}, "outline"))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col flex-wrap gap-2 [&>div]:flex [&>div]:gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "checkbox"), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox-primary checkbox"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox-secondary checkbox"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox-accent checkbox"
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox checkbox-xs"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox checkbox-sm"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox checkbox-md"
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
defaultChecked: true,
className: "checkbox checkbox-lg"
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "checkbox",
disabled: true
}), /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "checkbox",
disabled: true,
defaultChecked: true
}))), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col flex-wrap gap-2 [&>div]:flex [&>div]:gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "radio"), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio-primary radio"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio-secondary radio"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio-accent radio"
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio radio-xs"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio radio-sm"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio radio-md"
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
defaultChecked: true,
className: "radio radio-lg"
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("input", {
type: "radio",
className: "radio",
disabled: true
}), /*#__PURE__*/ React.createElement("input", {
type: "radio",
className: "radio",
disabled: true,
defaultChecked: true
}))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "link"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col items-start"
}, /*#__PURE__*/ React.createElement("a", {
className: "link"
}, "link"), /*#__PURE__*/ React.createElement("a", {
className: "link link-primary"
}, "link-primary"), /*#__PURE__*/ React.createElement("a", {
className: "link link-secondary"
}, "link-secondary"), /*#__PURE__*/ React.createElement("a", {
className: "link link-accent"
}, "link-accent"), /*#__PURE__*/ React.createElement("a", {
className: "link link-neutral"
}, "link-neutral"), /*#__PURE__*/ React.createElement("a", {
className: "link-hover link"
}, "link-hover"))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "tabs"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col items-center gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Tab 1"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Tab 2"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Tab 3")), /*#__PURE__*/ React.createElement("div", {
className: "tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab-bordered tab"
}, "tab-bordered"), /*#__PURE__*/ React.createElement("a", {
className: "tab-bordered tab tab-active"
}, "Tab 2"), /*#__PURE__*/ React.createElement("a", {
className: "tab-bordered tab"
}, "Tab 3")), /*#__PURE__*/ React.createElement("div", {
className: "tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab"
}, "tab-lifted"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab tab-active"
}, "Tab 2"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab"
}, "Tab 3")), /*#__PURE__*/ React.createElement("div", {
className: "tabs-boxed tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "tabs-boxed"), /*#__PURE__*/ React.createElement("a", {
className: "tab tab-active"
}, "Tab 2"), /*#__PURE__*/ React.createElement("a", {
className: "tab"
}, "Tab 3")), /*#__PURE__*/ React.createElement("div", {
className: "tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab-xs tab"
}, "tab-xs"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab-xs tab tab-active"
}, "Tiny"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab-xs tab"
}, "Tiny")), /*#__PURE__*/ React.createElement("div", {
className: "tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab-sm tab"
}, "tab-sm"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab-sm tab tab-active"
}, "Small"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab-sm tab"
}, "Small")), /*#__PURE__*/ React.createElement("div", {
className: "tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab"
}, "Normal"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab tab-active"
}, "Normal"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab"
}, "Normal")), /*#__PURE__*/ React.createElement("div", {
className: "tabs"
}, /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab-lg tab"
}, "tab-lg"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab-lg tab tab-active"
}, "Large"), /*#__PURE__*/ React.createElement("a", {
className: "tab-lifted tab-lg tab"
}, "Large")))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "progress"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col gap-2"
}, /*#__PURE__*/ React.createElement("progress", {
className: "progress w-56",
value: "0",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-primary w-56",
value: "10",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-secondary w-56",
value: "25",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-accent w-56",
value: "40",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-info w-56",
value: "55",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-success w-56",
value: "70",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-warning w-56",
value: "85",
max: "100"
}), /*#__PURE__*/ React.createElement("progress", {
className: "progress progress-error w-56",
value: "100",
max: "100"
}))), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "divider"
}, "radial-progress"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-wrap gap-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "radial-progress",
style: {
"--value": 0
}
}, "0%"), /*#__PURE__*/ React.createElement("div", {
className: "radial-progress",
style: {
"--value": 10
}
}, "10%"), /*#__PURE__*/ React.createElement("div", {
className: "text-primary radial-progress",
style: {
"--value": 30
}
}, "primary"), /*#__PURE__*/ React.createElement("div", {
className: "border-primary bg-primary radial-progress border-4 text-primary-content",
style: {
"--value": 35
}
}, "35%"), /*#__PURE__*/ React.createElement("div", {
className: "radial-progress text-info",
style: {
"--value": 40,
"--size": "10rem",
"--thickness": "2px"
}
}, "10rem/2px"), /*#__PURE__*/ React.createElement("div", {
className: "radial-progress",
style: {
"--value": 40,
"--size": "10rem",
"--thickness": "2rem"
}
}, "10rem/2rem")))));
};
const intents = [
"primary",
"secondary",
"accent",
"info",
"success",
"warning",
"error"
];
const sizes = [
"xs",
"sm",
"md",
"lg"
];
//# sourceMappingURL=DaisyThemeDemo.js.map