@crossed/demo/lib/module/unicons.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { Input, Text, XBox, YBox } from "@crossed/ui";
import * as Icons from "@crossed/unicons";
import Fuse from "fuse.js";
import { useMemo, useState } from "react";
const UniconsDemo = () => {
  const iconsKey = Object.keys(Icons);
  const [search, setSearch] = useState("");
  const fuse = useMemo(() => {
    return new Fuse(iconsKey, {});
  }, [iconsKey]);
  return /* @__PURE__ */ jsxs(YBox, { className: "w-full", children: [
    /* @__PURE__ */ jsx(Input, { value: search, onChangeValue: setSearch, size: "lg", children: /* @__PURE__ */ jsxs(Input.Content, { children: [
      /* @__PURE__ */ jsx(Input.Input, { placeholder: "Search..." }),
      search && /* @__PURE__ */ jsx(Input.Icon, { onPress: () => setSearch(""), children: /* @__PURE__ */ jsx(Icons.UilTimes, {}) })
    ] }) }),
    /* @__PURE__ */ jsx(XBox, { className: "flex-wrap justify-center gap-y-10", space: "xl", children: (search ? fuse.search(search).map(({ item }) => item) : iconsKey).map(
      (name) => {
        const Icon = Icons[name];
        return /* @__PURE__ */ jsxs(
          YBox,
          {
            space: "sm",
            className: "basis-2/12 items-center rounded-md py-5",
            children: [
              /* @__PURE__ */ jsx(Icon, { size: 32 }),
              /* @__PURE__ */ jsx(Text, { className: "dark:text-neutral-500", children: name })
            ]
          },
          name
        );
      }
    ) })
  ] });
};
export {
  UniconsDemo
};
//# sourceMappingURL=unicons.js.map