@wener/console
Version:
Base console UI toolkit
121 lines (120 loc) • 5.19 kB
JavaScript
import React from "react";
import { useWindow } from "../ReactWindow.js";
import { StandaloneWindow } from "./StandaloneWindow.js";
var meta = {
title: "console/window/standalone",
parameters: {
layout: "fullscreen"
}
};
export default meta;
export var Demo = function () {
var win = useWindow();
return /*#__PURE__*/ React.createElement("div", {
className: "bg-base-200 h-screen w-screen"
}, /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("h1", {
className: "mb-4 text-2xl font-bold"
}, "Standalone Window Demo"), /*#__PURE__*/ React.createElement("div", {
className: "mb-4 flex gap-2"
}, /*#__PURE__*/ React.createElement("button", {
type: "button",
className: "btn btn-primary",
onClick: function () {
win.open({
title: "Calculator",
width: 300,
height: 400,
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("div", {
className: "mb-4 text-center text-xl font-bold"
}, "Calculator"), /*#__PURE__*/ React.createElement("div", {
className: "grid grid-cols-4 gap-2"
}, [
"7",
"8",
"9",
"/",
"4",
"5",
"6",
"*",
"1",
"2",
"3",
"-",
"0",
".",
"=",
"+"
].map(function (btn) {
return /*#__PURE__*/ React.createElement("button", {
key: btn,
className: "btn btn-sm"
}, btn);
})));
}
});
}
}, "Open Calculator"), /*#__PURE__*/ React.createElement("button", {
type: "button",
className: "btn btn-secondary",
onClick: function () {
win.open({
title: "Text Editor",
width: 600,
height: 400,
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "flex h-full flex-col p-4"
}, /*#__PURE__*/ React.createElement("h3", {
className: "mb-2 text-lg font-semibold"
}, "Text Editor"), /*#__PURE__*/ React.createElement("textarea", {
className: "textarea textarea-bordered flex-1 resize-none",
placeholder: "Type your text here..."
}));
}
});
}
}, "Open Text Editor"), /*#__PURE__*/ React.createElement("button", {
type: "button",
className: "btn btn-accent",
onClick: function () {
win.open({
title: "Settings",
width: 400,
height: 300,
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "p-4"
}, /*#__PURE__*/ React.createElement("h3", {
className: "mb-4 text-lg font-semibold"
}, "Settings"), /*#__PURE__*/ React.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/ React.createElement("label", {
className: "flex items-center gap-2"
}, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "checkbox"
}), "Enable notifications"), /*#__PURE__*/ React.createElement("label", {
className: "flex items-center gap-2"
}, /*#__PURE__*/ React.createElement("input", {
type: "checkbox",
className: "checkbox"
}), "Dark mode"), /*#__PURE__*/ React.createElement("div", {
className: "flex gap-2"
}, /*#__PURE__*/ React.createElement("button", {
className: "btn btn-primary btn-sm"
}, "Save"), /*#__PURE__*/ React.createElement("button", {
className: "btn btn-outline btn-sm"
}, "Cancel"))));
}
});
}
}, "Open Settings")), /*#__PURE__*/ React.createElement("p", {
className: "text-base-content/70"
}, "Click the buttons above to open different windows. Try maximizing, minimizing, and resizing them. The toggle button in the bottom-right controls the dock sidebar.")), /*#__PURE__*/ React.createElement(StandaloneWindow, null));
};