@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
133 lines • 4.38 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _Icon, _Icon2;
import React from 'react';
import { Icon } from '@iconify/react';
import { Grid, useTheme } from '@mui/material';
import { CardFlexible } from '../../../organisms/CardFlexible';
import { NumberOutput } from '../../../components/NumberOutput';
import { TextForLinesOutput } from '../../../components/TextForLinesOutput';
import { IconButtonComponent } from '../../../components/IconButtonComponent';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var CardPurchase = function CardPurchase(_ref) {
var label = _ref.label,
price = _ref.price,
desc = _ref.desc;
var theme = useTheme();
var _React$useState = React.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
number = _React$useState2[0],
setNumber = _React$useState2[1];
return /*#__PURE__*/_jsx(CardFlexible, {
shadow: "none",
border: "1px solid #ECECFB",
style: {
height: 'min-content'
},
children: /*#__PURE__*/_jsxs(Grid, {
container: true,
direction: "row",
children: [/*#__PURE__*/_jsx(Grid, {
item: true,
xs: 6,
children: /*#__PURE__*/_jsxs(Grid, {
container: true,
direction: "column",
children: [/*#__PURE__*/_jsx(Grid, {
item: true,
xs: true,
children: /*#__PURE__*/_jsx(TextForLinesOutput, {
clines: 1,
text: label,
fontSize: "16px",
fontWeight: "600"
})
}), /*#__PURE__*/_jsx(Grid, {
item: true,
xs: true,
children: /*#__PURE__*/_jsxs(Grid, {
container: true,
columnGap: "10px",
alignItems: "center",
children: [/*#__PURE__*/_jsx(Grid, {
item: true,
children: /*#__PURE__*/_jsx(TextForLinesOutput, {
clines: 1,
text: price,
color: theme.palette.primary.main,
fontSize: "18px",
fontWeight: "700"
})
}), /*#__PURE__*/_jsx(Grid, {
item: true,
children: /*#__PURE__*/_jsx(TextForLinesOutput, {
fontSize: "14px",
fontWeight: "400",
clines: 1,
text: desc,
color: theme.palette.text.secondary,
sx: {
textDecoration: 'line-through'
}
})
})]
})
})]
})
}), /*#__PURE__*/_jsx(Grid, {
item: true,
xs: 6,
sx: {
display: 'flex',
alignItems: 'center'
},
children: /*#__PURE__*/_jsxs(Grid, {
container: true,
columnGap: "15px",
alignItems: "center",
justifyContent: "flex-end",
children: [/*#__PURE__*/_jsx(Grid, {
item: true,
sx: {
backgroundColor: '#fff'
},
children: /*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
size: 'small',
onClick: function onClick() {
return setNumber(number - 1);
},
sx: {
boxShadow: 'rgb(0 0 0 / 9%) 0px 3px 12px'
}
},
children: _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
icon: "gg:math-minus"
}))
})
}), /*#__PURE__*/_jsx(Grid, {
item: true,
children: /*#__PURE__*/_jsx(NumberOutput, {
number: number
})
}), /*#__PURE__*/_jsx(Grid, {
item: true,
children: /*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
size: 'small',
onClick: function onClick() {
return setNumber(number + 1);
},
sx: {
boxShadow: 'rgb(0 0 0 / 9%) 0px 3px 12px'
}
},
children: _Icon2 || (_Icon2 = /*#__PURE__*/_jsx(Icon, {
icon: "carbon:add"
}))
})
})]
})
})]
})
});
};