@frontify/fondue
Version:
Design system of Frontify
55 lines (54 loc) • 1.96 kB
JavaScript
import { jsx as w, jsxs as a } from "react/jsx-runtime";
import { merge as b } from "../../../../../utilities/merge.es.js";
const c = (r, i) => {
let n = 0, t = 0;
return i && (n = 100 / r.getGrid().size, t = i ? r.indexOf(i) * 100 : 0), { width: n, position: t };
};
function m({
i18n: r,
icons: i,
emojiLibrary: n,
focusedCategory: t,
onClick: o
}) {
const { width: s, position: l } = c(n, t);
return /* @__PURE__ */ w(
"nav",
{
id: "emoji-nav",
className: "tw-mb-2.5 tw-border-0 tw-border-b tw-border-solid tw-border-b-[rgb(243,244,246)] tw-p-3",
children: /* @__PURE__ */ a("div", { className: "tw-relative tw-flex", children: [
n.getGrid().sections().map(({ id: e }) => /* @__PURE__ */ w(
"button",
{
"aria-label": r.categories[e],
title: r.categories[e],
type: "button",
className: b([
"tw-flex tw-grow tw-cursor-pointer tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-fill-current tw-text-sm ",
e === t ? "tw-pointer-events-none tw-fill-current tw-text-[rgb(37,99,235)]" : "tw-text-[rgb(107,114,128)] hover:tw-text-[rgb(31,41,55)]"
]),
onClick: () => o(e),
children: /* @__PURE__ */ w("span", { style: { width: "20px", height: "20px" }, children: i.categories[e].outline })
},
e
)),
/* @__PURE__ */ w(
"div",
{
className: "tw-absolute tw--bottom-3 tw-left-0 tw-h-[3px] tw-w-full tw-rounded-t tw-bg-[rgb(37,99,235)] tw-opacity-100 tw-transition-transform tw-duration-200",
style: {
visibility: t ? "visible" : "hidden",
width: `${s}%`,
transform: `translateX(${l}%)`
}
}
)
] })
}
);
}
export {
m as EmojiPickerNavigation
};
//# sourceMappingURL=EmojiPickerNavigation.es.js.map