lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
83 lines • 4.16 kB
JavaScript
;
"use client";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const framer_motion_1 = require("framer-motion");
const clsx_1 = __importDefault(require("clsx"));
const NavEffect = ({ children, effectType = "underline", underlineColor = "currentColor", underlineHeight = "2px", duration = 0.3, fontSize = "text-sm md:text-base", className = "", boxBgColor = "rgba(0, 0, 0, 0.1)", }) => {
const renderEffect = () => {
switch (effectType) {
case "underline":
return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { variants: {
initial: { width: 0, opacity: 0 },
hover: {
width: "100%",
opacity: 1,
transition: { duration, ease: "easeInOut" },
},
}, style: {
backgroundColor: underlineColor,
height: underlineHeight,
bottom: "0px",
left: "0px",
borderRadius: "9999px",
}, className: "absolute w-full" }));
case "overline":
return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { variants: {
initial: { width: 0, opacity: 0 },
hover: {
width: "100%",
opacity: 1,
transition: { duration, ease: "easeInOut" },
},
}, style: {
backgroundColor: underlineColor,
height: underlineHeight,
top: "0px",
left: "0px",
borderRadius: "9999px",
}, className: "absolute w-full" }));
case "box":
return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { variants: {
initial: { opacity: 0, scale: 0.95 },
hover: {
opacity: 1,
scale: 1,
transition: { duration, ease: "easeOut" },
},
}, style: {
backgroundColor: boxBgColor,
borderRadius: "8px",
}, className: "absolute inset-0 -z-10" }));
case "slide":
return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { variants: {
initial: { x: "-100%", opacity: 0 },
hover: {
x: "0%",
opacity: 1,
transition: { duration, ease: "easeInOut" },
},
}, style: {
backgroundColor: underlineColor,
height: underlineHeight,
borderRadius: "9999px",
}, className: "absolute bottom-0 left-0 w-full" }));
default:
return null;
}
};
return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.li, { whileHover: "hover", initial: "initial", animate: "initial", whileTap: "hover", className: (0, clsx_1.default)("relative inline-flex flex-col items-center justify-center cursor-pointer font-medium transition-colors", fontSize, className), variants: effectType === "grow"
? {
initial: { scale: 1 },
hover: {
scale: 1.1,
transition: { duration, ease: "easeInOut" },
},
}
: undefined, children: (0, jsx_runtime_1.jsxs)("span", { className: "relative inline-block pb-[2px]", children: [children, renderEffect()] }) }));
};
exports.default = NavEffect;
//# sourceMappingURL=nav-effect.js.map