stone-kit
Version:
uikit for redesign
135 lines (134 loc) • 5.83 kB
JavaScript
import { jsx as t, jsxs as i } from "react/jsx-runtime";
import W, { useState as n } from "react";
import { Button as w } from "../../components/Button/ui/Button.js";
import "../../components/mobileButton/ui/MobileButton.js";
import { NewIcon as d, iconTypes as A } from "../../components/NewIcon/ui/NewIcon.js";
import "../../components/DestinationTab/ui/DestinationTab.js";
import { RoundButton as g } from "../../components/RoundButton/ui/RoundButton.js";
import "../../components/Tag/ui/Tag.js";
import { Switcher as b } from "../../components/Switcher/ui/Switcher.js";
import "../../components/Text/ui/Text.js";
import "../../components/Flex/ui/Flex.js";
import "../../components/Input/ui/Input.js";
import "react-dom";
import "../../FilterWithSave-Dy5t7CrS.js";
import "../../components/GroupedInput/ui/GroupedInputs.js";
import "../../index-rKuIKazb.js";
import "../../components/MetroTag/ui/MetroTag.js";
import "../../components/Select/ui/Select.js";
import { SliderNavigation as B } from "../../components/SliderNavigation/ui/SliderNavigation.js";
import "../../components/LotCardSkeleton/ui/LotCardSkeleton.js";
import "../../components/TabSelect/ui/TabSelect.js";
import { ZoomControls as y } from "../../components/ZoomControls/ui/ZoomControls.js";
import "../../components/CheckBox/CheckBox.js";
import "../../components/CheckBoxNew/CheckBoxNew.js";
import "../../components/CheckboxSelect/ui/CheckboxSelect.js";
import { s as a } from "../../ButtonState.module-DtW3aevR.js";
import { BUTTON_VARIANTS as j } from "../../components/Button/ui/Button.types.js";
const O = "_root_iex42_1", T = "_buttonsWrapper_iex42_11", r = {
root: O,
buttonsWrapper: T
}, V = ({ children: o }) => {
const [l, c] = n("auto"), [s, f] = n("blue"), [h, z] = n(!1), [m, I] = n(null), [p, S] = n(null), [N, C] = n(null), [k, P] = n(null), u = ["12", "16", "20", "24"], _ = W.cloneElement(o, {
width: l,
variant: s,
isLoading: h,
pre: m ? t(d, { name: m, size: N ?? "24" }) : null,
post: p ? t(d, { name: p, size: k ?? "24" }) : null
}), x = ["auto", "full"], L = Object.values(j), v = Object.keys(A);
return i("div", { className: a.root, children: [_, i("div", { className: a.optionsWrapper, children: [t("div", { children: i("label", { children: ["Width:", t("select", { onChange: (e) => c(e.target.value), children: x.map((e) => t("option", { value: e, children: e }, e)) })] }) }), t("div", { children: i("label", { children: ["Variants:", t("select", { onChange: (e) => f(e.target.value), children: L.map((e) => t("option", { value: e, children: e }, e)) })] }) }), t("div", { children: i("label", { children: ["Pre Icon:", t("select", { onChange: (e) => I(e.target.value), children: v.map((e) => t("option", { value: e, children: e }, e)) })] }) }), t("div", { children: i("label", { children: ["Post Icon:", t("select", { onChange: (e) => S(e.target.value), children: v.map((e) => t("option", { value: e, children: e }, e)) })] }) }), t("div", { children: i("label", { children: ["Pre Icon Size:", t("select", { onChange: (e) => C(e.target.value), children: u.map((e) => t("option", { value: e, children: e }, e)) })] }) }), t("div", { children: i("label", { children: ["Post Icon Size:", t("select", { onChange: (e) => P(e.target.value), children: u.map((e) => t("option", { value: e, children: e }, e)) })] }) }), i("label", { className: a.isLoading, children: ["isLoading", t("input", { type: "checkbox", onChange: () => z(!h) })] })] })] });
}, he = () => {
const [o, l] = n(!0), [c, s] = n(!1);
return /* @__PURE__ */ i("div", { className: r.root, children: [
/* @__PURE__ */ i("div", { className: r.clearButton, children: [
/* @__PURE__ */ t("h2", { children: "Обычная" }),
/* @__PURE__ */ t("div", { className: r.buttonsWrapper, children: /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(
w,
{
as: "button",
size: "large",
variant: "blue",
children: "Приветики"
}
) }) })
] }),
/* @__PURE__ */ i("div", { className: r.clearButton, children: [
/* @__PURE__ */ t("h2", { children: "Круглая" }),
/* @__PURE__ */ i("div", { className: r.buttonsWrapper, children: [
/* @__PURE__ */ t(
g,
{
variant: o ? "blackFill" : "whiteStroke",
size: "tiny",
onClick: () => l(!o),
children: /* @__PURE__ */ t(
d,
{
name: "close",
size: "12",
color: o ? "#fff" : "#000"
}
)
}
),
/* @__PURE__ */ t(
g,
{
iconName: "close",
variant: o ? "blackFill" : "whiteStroke",
deg: "90",
size: "tiny",
size_l: "small",
onClick: () => l(!o)
}
)
] })
] }),
/* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ t("h2", { children: "Зум" }),
/* @__PURE__ */ t(
y,
{
size: "medium",
zoomIn: () => {
},
zoomOut: () => {
}
}
)
] }),
/* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ t("h2", { children: "Слайдер" }),
/* @__PURE__ */ t(
B,
{
goNext: () => {
},
arr: [1, 2, 3],
indexSlide: 0,
goPrev: () => {
}
}
)
] }),
/* @__PURE__ */ t(
b,
{
isActive: o,
onClick: () => l(!o),
children: "В продаже"
}
),
/* @__PURE__ */ t(
b,
{
isActive: c,
onClick: () => s(!c),
children: "В продаже"
}
)
] });
};
export {
he as ButtonsPage
};