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