nice-ui
Version:
React design system, components, and utilities
32 lines (31 loc) • 1.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconPreview = void 0;
const React = require("react");
const context_1 = require("../../context");
const nano_theme_1 = require("nano-theme");
const Paper_1 = require("../../../../../../../4-card/Paper");
const Flex_1 = require("../../../../../../../3-list-item/Flex");
const Breadcrumbs_1 = require("../../../../../../../3-list-item/Breadcrumbs");
const blockClass = (0, nano_theme_1.rule)({});
const sizeScale = [12, 16, 20, 24, 32, 48, 64];
const IconPreview = ({ set, icon }) => {
const [size, setSize] = React.useState(16);
const state = (0, context_1.useIconsGrid)();
const href = state.href(set, icon);
const iconElement = (
// <Paper fill={1} noOutline hoverElevate style={{width: 128, height: 128, display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
React.createElement(Flex_1.Flex, { style: { justifyContent: 'center' } },
React.createElement(Paper_1.default, { contrast: true, hoverElevate: true, style: { width: 280, height: 128, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
React.createElement("img", { src: href, alt: `${set} set ${icon} icon SVG`, width: size, height: size }))));
const sizeScaleElement = (React.createElement(Flex_1.Flex, { style: { columnGap: 8, justifyContent: 'center', padding: '16px 0 24px' } }, sizeScale.map((s) => (
// <BasicButton key={s} width={'auto'} onClick={() => setSize(s)}>{s}px</BasicButton>
// <PillButton key={s} width={'auto'} onClick={() => setSize(s)}>{s}px</PillButton>
React.createElement(Breadcrumbs_1.Breadcrumb, { key: s, compact: true, selected: s === size, onClick: () => setSize(s) },
s,
"px")))));
return (React.createElement("div", null,
iconElement,
sizeScaleElement));
};
exports.IconPreview = IconPreview;