@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
42 lines (41 loc) • 4 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { CardBody, Card as CardMaterial, } from "@material-tailwind/react";
import { Icon, Typography } from "../../atoms";
export 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((isFlipped) => !isFlipped);
setFlipAnimation(`duration-${animationSpeed} scale-x-100`);
}, animationSpeed);
};
const frontContent = (_jsxs(_Fragment, { children: [_jsxs(CardBody, { className: `flex flex-col h-full w-full items-center justify-center ${inactive ? "bg-[#E2E7F2]" : ""}`, children: [icon && (_jsx(Icon, { height: 32, width: 32, name: icon, color: "neutral-950", className: "mb-[10px]" })), _jsx(Typography, { variant: "p", className: "text-center text-neutral-950 font-medium", children: title })] }), withArrow && !inactive && (_jsx("div", { className: "flex absolute z-0 md:p-4 bottom-0 w-full h-full", children: generateArrow(isHovered) }))] }));
const backContent = !inactive && (_jsxs(CardBody, { className: "bg-primary-600 p-[21px] md:p-[30px] h-full w-full flex flex-col text-white", children: [_jsxs("div", { className: "flex items-center", children: [icon && (_jsx(Icon, { height: 20, width: 20, name: icon, color: "neutral-000", className: "my-auto" })), _jsx(Typography, { variant: "p-xs", breakpointVariants: {
md: "p",
}, className: "text-white pl-[10px] font-medium", children: title })] }), _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
?.split(" ")
.some((className) => className.startsWith("h-"));
const hasCustomWidth = className
?.split(" ")
.some((className) => className.startsWith("w-"));
const defaultDimensions = `${!hasCustomHeight ? "h-[248px] md:h-[345px]" : ""} ${!hasCustomWidth ? "w-[156px] md:w-[216px]" : ""}`;
return (_jsx("div", { className: `${className ? className : ""} ${defaultDimensions}`, children: _jsxs(CardMaterial, { className: `hover:cursor-pointer overflow-hidden h-full transform w-full transition ${flipAnimation} grow`, onClick: flipCard, ...props, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_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 (_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: _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: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M10 5l7 7-7 7M17 12H3" }) }) }));
}