@wener/console
Version:
Base console UI toolkit
180 lines (179 loc) • 7.26 kB
JavaScript
function _array_like_to_array(arr, len) {
if (len == null || len > arr.length)
len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++)
arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr))
return arr;
}
function _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null)
return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i)
break;
}
}
catch (err) {
_d = true;
_e = err;
}
finally {
try {
if (!_n && _i["return"] != null)
_i["return"]();
}
finally {
if (_d)
throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o)
return;
if (typeof o === "string")
return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor)
n = o.constructor.name;
if (n === "Map" || n === "Set")
return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
return _array_like_to_array(o, minLen);
}
import { ActionIcon, AppletIcon } from "./ActionIcon.js";
import { FileExtIcon } from "./FileExtIcon.js";
import { FileTypeIcon } from "./FileTypeIcon.js";
var meta = {
title: "components/icons",
parameters: {
layout: "padded"
}
};
export default meta;
var IconGrid = function (param) {
var icons = param.icons, title = param.title;
return /*#__PURE__*/ React.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/ React.createElement("h2", {
className: "text-xl font-semibold"
}, title), /*#__PURE__*/ React.createElement("div", {
className: "grid grid-cols-6 gap-4"
}, Object.entries(icons).map(function (param) {
var _param = _sliced_to_array(param, 2), name = _param[0], Icon = _param[1];
return /*#__PURE__*/ React.createElement("div", {
key: name,
className: "flex flex-col items-center space-y-2 rounded-lg border p-4"
}, /*#__PURE__*/ React.createElement(Icon, {
className: "h-6 w-6"
}), /*#__PURE__*/ React.createElement("span", {
className: "text-center font-mono text-sm"
}, name));
})));
};
export var AllIcons = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "space-y-8"
}, /*#__PURE__*/ React.createElement(IconGrid, {
icons: ActionIcon,
title: "Action Icons"
}), /*#__PURE__*/ React.createElement(IconGrid, {
icons: AppletIcon,
title: "Applet Icons"
}), /*#__PURE__*/ React.createElement(IconGrid, {
icons: FileTypeIcon,
title: "File Type Icons"
}), /*#__PURE__*/ React.createElement(IconGrid, {
icons: FileExtIcon,
title: "File Extension Icons"
}));
}
};
export var ActionIconsDemo = {
render: function () {
return /*#__PURE__*/ React.createElement(IconGrid, {
icons: ActionIcon,
title: "Action Icons"
});
}
};
export var AppletIconsDemo = {
render: function () {
return /*#__PURE__*/ React.createElement(IconGrid, {
icons: AppletIcon,
title: "Applet Icons"
});
}
};
export var FileTypeIconsDemo = {
render: function () {
return /*#__PURE__*/ React.createElement(IconGrid, {
icons: FileTypeIcon,
title: "File Type Icons"
});
}
};
export var FileExtIconsDemo = {
render: function () {
return /*#__PURE__*/ React.createElement(IconGrid, {
icons: FileExtIcon,
title: "File Extension Icons"
});
}
};
export var IconUsageExample = {
render: function () {
return /*#__PURE__*/ React.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/ React.createElement("h2", {
className: "text-xl font-semibold"
}, "Usage Examples"), /*#__PURE__*/ React.createElement("div", {
className: "space-y-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "flex items-center space-x-2"
}, /*#__PURE__*/ React.createElement(ActionIcon.Save, {
className: "h-5 w-5"
}), /*#__PURE__*/ React.createElement("span", null, "Save Document")), /*#__PURE__*/ React.createElement("div", {
className: "flex items-center space-x-2"
}, /*#__PURE__*/ React.createElement(ActionIcon.Delete, {
className: "h-5 w-5 text-red-500"
}), /*#__PURE__*/ React.createElement("span", null, "Delete Item")), /*#__PURE__*/ React.createElement("div", {
className: "flex items-center space-x-2"
}, /*#__PURE__*/ React.createElement(FileTypeIcon.image, {
className: "h-5 w-5 text-blue-500"
}), /*#__PURE__*/ React.createElement("span", null, "Image File")), /*#__PURE__*/ React.createElement("div", {
className: "flex items-center space-x-2"
}, /*#__PURE__*/ React.createElement(FileExtIcon.js, {
className: "h-5 w-5 text-yellow-500"
}), /*#__PURE__*/ React.createElement("span", null, "JavaScript File")), /*#__PURE__*/ React.createElement("div", {
className: "flex items-center space-x-2"
}, /*#__PURE__*/ React.createElement(AppletIcon.Clock, {
className: "h-5 w-5 text-green-500"
}), /*#__PURE__*/ React.createElement("span", null, "Clock Applet"))), /*#__PURE__*/ React.createElement("div", {
className: "mt-6"
}, /*#__PURE__*/ React.createElement("h3", {
className: "text-lg font-medium"
}, "Code Example:"), /*#__PURE__*/ React.createElement("pre", {
className: "mt-2 rounded-lg bg-gray-100 p-4 text-sm"
}, "import { ActionIcon, AppletIcon, FileTypeIcon, FileExtIcon } from '@wener/console/components/icons';\n\n// Use in JSX\n<ActionIcon.Save className=\"w-5 h-5\" />\n<FileTypeIcon.image className=\"w-5 h-5\" />\n<FileExtIcon.js className=\"w-5 h-5\" />\n<AppletIcon.Clock className=\"w-5 h-5\" />\n\n// Available icon sets:\n".concat(Object.keys(ActionIcon).length, " Action Icons\n").concat(Object.keys(AppletIcon).length, " Applet Icons\n").concat(Object.keys(FileTypeIcon).length, " File Type Icons\n").concat(Object.keys(FileExtIcon).length, " File Extension Icons"))));
}
};