@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
79 lines (78 loc) • 2.56 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { Icon } from "../Icon/Icon.esm.js";
import { clsx } from "clsx";
import { Typography } from "../Typography/Typography.esm.js";
import { OptionBoxVariant } from "./types.esm.js";
import { useState, useEffect } from "react";
const OptionBox = ({
icon,
title,
tag,
className,
changeIconColor = false,
disabled = false,
selected = false,
onSelect
}) => {
const [type, setType] = useState(OptionBoxVariant.DEFAULT);
useEffect(() => {
if (selected)
setType(OptionBoxVariant.SELECTED);
else
setType(OptionBoxVariant.DEFAULT);
}, [selected]);
useEffect(() => {
if (disabled)
setType(OptionBoxVariant.DISABLED);
}, [disabled]);
const handleClick = () => {
if (disabled)
return;
onSelect && onSelect();
};
return /* @__PURE__ */ jsxs(
"div",
{
className: `flex flex-row w-full gap-4 items-center h-[56px] border rounded-[8px] px-4 ${clsx(className)}
${clsx(type === OptionBoxVariant.DEFAULT && "border-neutral-50 cursor-pointer")}
${clsx(type === OptionBoxVariant.DISABLED && "cursor-not-allowed bg-neutral-50 border-neutral-200")}
${clsx(type === OptionBoxVariant.SELECTED && "bg-primary-50 border-primary-600")}
`,
onClick: handleClick,
children: [
/* @__PURE__ */ jsx(
"div",
{
className: `flex h-[32px] w-[32px] content-center rounded-[8px] shrink-0
${changeIconColor && (type === OptionBoxVariant.SELECTED ? "bg-primary-200" : "bg-neutral-200")}`,
children: /* @__PURE__ */ jsx(
Icon,
{
name: icon,
height: changeIconColor ? 16 : 32,
width: changeIconColor ? 16 : 32,
className: "mx-auto",
color: `${type === OptionBoxVariant.SELECTED && changeIconColor && "primary-600"}`
}
)
}
),
/* @__PURE__ */ jsxs("div", { className: `flex flex-row w-full items-center justify-between`, children: [
/* @__PURE__ */ jsx(
Typography,
{
variant: "p-leading",
className: "text-[16px] text-neutral-950",
children: title
}
),
tag && /* @__PURE__ */ jsx("div", { className: "rounded-full bg-primary-100 text-primary-600 px-[8px] py-[2px]", children: tag })
] })
]
}
);
};
export {
OptionBox
};
//# sourceMappingURL=OptionBox.esm.js.map