@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
31 lines (30 loc) • 2.07 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "../Icon/Icon";
import { clsx } from "clsx";
import { Typography } from "../Typography/Typography";
import { OptionBoxVariant } from "./types";
import { useEffect, useState } from "react";
export 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 (_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: [_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: _jsx(Icon, { name: icon, height: changeIconColor ? 16 : 32, width: changeIconColor ? 16 : 32, className: "mx-auto", color: `${type === OptionBoxVariant.SELECTED && changeIconColor && "primary-600"}` }) }), _jsxs("div", { className: `flex flex-row w-full items-center justify-between`, children: [_jsx(Typography, { variant: "p-leading", className: "text-[16px] text-neutral-950", children: title }), tag && (_jsx("div", { className: "rounded-full bg-primary-100 text-primary-600 px-[8px] py-[2px]", children: tag }))] })] }));
};