@dndbuilder.com/react
Version:
Drag and drop builder for React
112 lines (111 loc) • 4.67 kB
JavaScript
"use client";
import { jsxs as i, jsx as e } from "react/jsx-runtime";
import { Select as s } from "./select.js";
import { Tooltip as r } from "./tooltip.js";
import { setCurrentBreakpoint as p } from "../../store/builder-slice.js";
import { getCurrentBreakpoint as g } from "../../../../../store/selectors.js";
import { Breakpoint as t } from "../../types/responsive.js";
import { useAppDispatch as f } from "../../hooks/use-app-dispatch.js";
import { useAppSelector as u } from "../../hooks/use-app-selector.js";
import { classNames as a } from "../../../../../utils.js";
import { FaTabletAlt as n, FaMobileAlt as c } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fa/index.js";
import { FiMonitor as o } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
const A = ({ className: h }) => {
const l = u(g), d = f();
return /* @__PURE__ */ i(
s,
{
onValueChange: (m) => {
d(p(m));
},
value: l,
defaultValue: t.DESKTOP,
children: [
/* @__PURE__ */ i(
s.Trigger,
{
className: a("h-3 w-7 border-0 p-1 focus:ring-0 focus:ring-offset-0", h),
chevronDown: !1,
children: [
l === t.DESKTOP && /* @__PURE__ */ i(r, { children: [
/* @__PURE__ */ e(r.Trigger, { asChild: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(o, { className: "text-gray-500" }) }) }),
/* @__PURE__ */ e(r.Content, { side: "right", children: "Desktop" })
] }),
l === t.TABLET && /* @__PURE__ */ i(r, { children: [
/* @__PURE__ */ e(r.Trigger, { asChild: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(n, { className: "text-gray-500" }) }) }),
/* @__PURE__ */ e(r.Content, { side: "right", children: "Tablet" })
] }),
l === t.MOBILE && /* @__PURE__ */ i(r, { children: [
/* @__PURE__ */ e(r.Trigger, { asChild: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(c, { className: "text-gray-500" }) }) }),
/* @__PURE__ */ e(r.Content, { side: "right", children: "Mobile" })
] })
]
}
),
/* @__PURE__ */ e(s.Content, { alignOffset: 0, sideOffset: -23, className: "min-w-[30px] border-0", children: /* @__PURE__ */ i(s.Group, { children: [
/* @__PURE__ */ e(
s.Item,
{
className: "flex justify-center px-0 py-1.5",
value: t.DESKTOP,
showCheck: !1,
children: /* @__PURE__ */ i(r, { children: [
/* @__PURE__ */ e(r.Trigger, { className: "px-1", children: /* @__PURE__ */ e(
o,
{
className: a("text-gray-500", {
"text-gray-800": l === t.DESKTOP
})
}
) }),
/* @__PURE__ */ e(r.Content, { side: "right", children: "Desktop" })
] })
}
),
/* @__PURE__ */ e(
s.Item,
{
className: "flex justify-center px-0 py-1.5",
value: t.TABLET,
showCheck: !1,
children: /* @__PURE__ */ i(r, { children: [
/* @__PURE__ */ e(r.Trigger, { className: "px-1", children: /* @__PURE__ */ e(
n,
{
className: a("text-gray-500", {
"text-gray-800": l === t.TABLET
})
}
) }),
/* @__PURE__ */ e(r.Content, { side: "right", children: "Tablet" })
] })
}
),
/* @__PURE__ */ e(
s.Item,
{
className: "flex justify-center px-0 py-1.5",
value: t.MOBILE,
showCheck: !1,
children: /* @__PURE__ */ i(r, { children: [
/* @__PURE__ */ e(r.Trigger, { className: "px-1", children: /* @__PURE__ */ e(
c,
{
className: a("text-gray-500", {
"text-gray-800": l === t.MOBILE
})
}
) }),
/* @__PURE__ */ e(r.Content, { side: "right", children: "Mobile" })
] })
}
)
] }) })
]
}
);
};
export {
A as BreakpointSelector
};
//# sourceMappingURL=breakpoint-selector.js.map