@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
149 lines (148 loc) • 5.07 kB
JavaScript
"use client";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { Card, CardBody } from "@material-tailwind/react";
import { Icon } from "../../atoms/Icon/Icon.esm.js";
import { Typography } from "../../atoms/Typography/Typography.esm.js";
const LandingCard = ({
className,
icon,
title,
inactive,
flipContent,
flavourText,
withArrow = true,
animationSpeed = 200,
...props
}) => {
const [isFlipped, setFlipped] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const [flipAnimation, setFlipAnimation] = useState("");
const cardDoesFlip = inactive ? false : !flipContent ? false : true;
const flipCard = () => {
if (!cardDoesFlip)
return;
animateFlip();
};
const animateFlip = () => {
setFlipAnimation(`duration-${animationSpeed} scale-x-0`);
setTimeout(() => {
setFlipped((isFlipped2) => !isFlipped2);
setFlipAnimation(`duration-${animationSpeed} scale-x-100`);
}, animationSpeed);
};
const frontContent = /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
CardBody,
{
className: `flex flex-col h-full w-full items-center justify-center ${inactive ? "bg-[#E2E7F2]" : ""}`,
children: [
icon && /* @__PURE__ */ jsx(
Icon,
{
height: 32,
width: 32,
name: icon,
color: "neutral-950",
className: "mb-[10px]"
}
),
/* @__PURE__ */ jsx(
Typography,
{
variant: "p",
className: "text-center text-neutral-950 font-medium",
children: title
}
)
]
}
),
withArrow && !inactive && /* @__PURE__ */ jsx("div", { className: "flex absolute z-0 md:p-4 bottom-0 w-full h-full", children: generateArrow(isHovered) })
] });
const backContent = !inactive && /* @__PURE__ */ jsxs(CardBody, { className: "bg-primary-600 p-[21px] md:p-[30px] h-full w-full flex flex-col text-white", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
icon && /* @__PURE__ */ jsx(
Icon,
{
height: 20,
width: 20,
name: icon,
color: "neutral-000",
className: "my-auto"
}
),
/* @__PURE__ */ jsx(
Typography,
{
variant: "p-xs",
breakpointVariants: {
md: "p"
},
className: "text-white pl-[10px] font-medium",
children: title
}
)
] }),
/* @__PURE__ */ jsx(
Typography,
{
variant: "p-xs",
breakpointVariants: {
md: "p-sm"
},
className: "grow pt-[10px] overflow-hidden text-ellipsis text-left",
children: flipContent
}
)
] });
const content = isFlipped && !inactive ? backContent : frontContent;
const hasCustomHeight = className == null ? void 0 : className.split(" ").some((className2) => className2.startsWith("h-"));
const hasCustomWidth = className == null ? void 0 : className.split(" ").some((className2) => className2.startsWith("w-"));
const defaultDimensions = `${!hasCustomHeight ? "h-[248px] md:h-[345px]" : ""} ${!hasCustomWidth ? "w-[156px] md:w-[216px]" : ""}`;
return /* @__PURE__ */ jsx("div", { className: `${className ? className : ""} ${defaultDimensions}`, children: /* @__PURE__ */ jsxs(
Card,
{
className: `hover:cursor-pointer overflow-hidden h-full transform w-full transition ${flipAnimation} grow`,
onClick: flipCard,
...props,
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
children: [
/* @__PURE__ */ jsx("div", { className: "absolute z-0 top-[-15px] left-[-15px] h-full w-full font-dmsans font-bold text-[96px] text-black opacity-[3%] text-left text-nowrap", children: flavourText }),
content
]
}
) });
};
function generateArrow(active) {
return /* @__PURE__ */ jsx(
"span",
{
className: `flex transform bg-neutral-100 ${active ? "transition duration-500 bg-primary-500" : "transition duration-500 hover:bg-primary-500"} items-center justify-center rounded-full w-10 h-10 mx-auto md:ml-auto md:mr-0 mt-auto mb-[20px] md:mb-0 bottom-0"`,
children: /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
className: ` h-[16px] w-[16px] transform transition duration-500 ${active ? "text-white" : "text-neutral-900"} ml-1 `,
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M10 5l7 7-7 7M17 12H3"
}
)
}
)
}
);
}
export {
LandingCard
};
//# sourceMappingURL=LandingCard.esm.js.map