47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
DotLottieReact,
|
|
DotLottieReactProps,
|
|
} from "@lottiefiles/dotlottie-react";
|
|
import clsx from "clsx";
|
|
|
|
import { useLottie } from "@/hooks/lottie/useLottie";
|
|
import { ELottieKeys } from "@/shared/constants/lottie";
|
|
|
|
interface LottieAnimationProps {
|
|
loadKey: ELottieKeys;
|
|
width?: number | string;
|
|
height?: number | string;
|
|
className?: string;
|
|
animationProps?: DotLottieReactProps;
|
|
}
|
|
|
|
export default function LottieAnimation({
|
|
loadKey,
|
|
width = 80,
|
|
height = 80,
|
|
className,
|
|
animationProps,
|
|
}: LottieAnimationProps) {
|
|
const { animationData } = useLottie({
|
|
loadKey,
|
|
});
|
|
|
|
return (
|
|
<div style={{ width: width, height: height }} className={className}>
|
|
{animationData && (
|
|
<DotLottieReact
|
|
style={{ width: width, height: height }}
|
|
data={animationData}
|
|
autoplay
|
|
width={width}
|
|
height={height}
|
|
{...animationProps}
|
|
className={clsx(animationProps?.className, "ym-hide-content")}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|