@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
8 lines (7 loc) • 2.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card as CardMaterial, } from "@material-tailwind/react";
import { Button, GaugeHorizontal, Icon, Typography } from "../../atoms";
import { clsx } from "clsx";
export const MultiplierCard = ({ className, icon, title, subtitle, progress, maxProgress, multiplier, onCtaClick, ctaText, buttonClassName, buttonInactive = false, cardInactive, ...props }) => {
return (_jsx("div", { className: clsx(className), children: _jsxs(CardMaterial, { className: `w-fit h-full rounded-[24px] `, ...props, children: [_jsxs("div", { className: "w-full h-full flex flex-col gap-y-5 p-6 items-start", children: [icon && (_jsx("div", { className: "bg-neutral-200 h-[32px] w-[32px] rounded-[8px] shrink-0 flex items-center justify-center", children: _jsx(Icon, { name: icon, height: 20, width: 20, color: "neutral-950" }) })), _jsxs("div", { className: "grow flex-col py-2", children: [_jsx(Typography, { variant: "p", className: `font-medium ${cardInactive ? "text-neutral-800" : "text-neutral-1000"}`, children: title }), subtitle && (_jsx(Typography, { variant: "p-sm", className: "font-medium text-neutral-800 mt-[6px]", children: subtitle })), maxProgress && (_jsxs("div", { className: "flex flex-row ", children: [_jsx(GaugeHorizontal, { color: cardInactive ? "stroke-neutral-500" : undefined, bgColor: cardInactive ? "stroke-neutral-500" : undefined, percent: progress ? (progress * 100) / maxProgress : 0, strokeWidth: 10, length: 120, className: "pt-1.5" }), _jsx("div", { className: "mx-3 content-center", children: _jsx(Typography, { variant: "p-sm", className: "font-medium w-0 text-neutral-800", children: `${progress}/${maxProgress}` }) })] })), !maxProgress && (_jsxs("div", { className: "flex flex-row opacity-0", children: [_jsx(GaugeHorizontal, { color: cardInactive ? "stroke-neutral-500" : undefined, bgColor: cardInactive ? "stroke-neutral-500" : undefined, percent: 0, strokeWidth: 10, length: 120, className: "pt-1.5" }), _jsx("div", { className: "mx-3 content-center", children: _jsx(Typography, { variant: "p-sm", className: "font-medium w-0 text-neutral-800", children: "empty" }) })] }))] }), _jsx("div", { className: "content-center my-auto", children: _jsx(Typography, { variant: "p", className: `font-medium ${cardInactive ? "text-neutral-800" : "text-primary-600"}`, children: multiplier }) })] }), _jsx("div", { className: "w-fit bg-neutral-50 p-6 rounded-b-[24px]", children: _jsx(Button, { className: `my-auto w-[216px] text-nowrap items-center text-center ${buttonClassName ? buttonClassName : cardInactive || buttonInactive ? "bg-neutral-100" : "bg-primary-600 text-neutral-0"}`, onClick: onCtaClick, disabled: buttonInactive || cardInactive, children: _jsx(Typography, { variant: "p", className: `font-medium items-center w-full ${cardInactive || buttonInactive ? "text-neutral-900" : ""}`, children: ctaText }) }) })] }) }));
};