xtreme-ui/dist/components/base/Lottie/Lottie.js

Collection of reusable components that can be used in web projects

"use client";
import { jsx as r } from "react/jsx-runtime";
import { forwardRef as n, useState as L, useEffect as x } from "react";
import { DotLottieReact as d } from "@lottiefiles/dotlottie-react";
import y from "clsx";
/* empty css            */
import { ELottieSize as z } from "./types.js";
const N = n((i, s) => {
  const {
    className: a,
    src: l,
    size: e = "default",
    autoPlay: m = !0,
    loop: c = !0,
    speed: p = 1
  } = i, [t, f] = L(null), o = `${typeof e == "number" ? e : z[e]}px`, u = y("xtrLottieWrapper", a);
  return x(() => {
    o && (t == null || t.resize());
  }, [t, o]), /* @__PURE__ */ r(
    "div",
    {
      ref: s,
      className: u,
      style: { "--lottieSize": o },
      children: /* @__PURE__ */ r(
        d,
        {
          className: "xtrLottie",
          dotLottieRefCallback: f,
          src: l,
          autoplay: m,
          loop: c,
          speed: p,
          marker: "lottie"
        }
      )
    }
  );
});
N.displayName = "Lottie";
export {
  N as Lottie
};