@vlinderclimate/net-zero-ui
Version:
<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>
208 lines (203 loc) • 7.48 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var styles = require('@mui/material/styles');
var components_Button = require('../Button.js');
var components_Icon = require('../Icon.js');
require('@mui/material/Button');
require('../../theme/colors.js');
require('../../theme/typography.js');
require('../../icons/ArrowLeft.js');
require('../../icons/ArrowRight.js');
require('../../icons/CheckCircle.js');
require('../../icons/CloseCircle.js');
require('../../icons/InfoCircle.js');
require('../../icons/ErrorCircle.js');
require('../../icons/Attention.js');
require('../../icons/HelpCircle.js');
require('../../icons/Lock.js');
require('../../icons/Delete.js');
require('../../icons/TriangleRight.js');
require('../../icons/TriangleLeft.js');
require('../../icons/TriangleUp.js');
require('../../icons/TriangleDown.js');
require('../../icons/Download.js');
require('../../icons/Key.js');
require('../../icons/Edit.js');
require('../../icons/Expand.js');
require('../../icons/Collapse.js');
require('../../icons/Success.js');
require('../../icons/Fail.js');
require('../../icons/Loading.js');
require('../../icons/Check.js');
require('../../icons/ChevronLeft.js');
require('../../icons/ChevronRight.js');
require('../../icons/Plus.js');
require('../../icons/Minus.js');
require('../../icons/Link.js');
require('../../icons/Copy.js');
require('../../icons/Medium.js');
require('../../icons/Twitter.js');
require('../../icons/Telegram.js');
require('../../icons/Sort.js');
require('../../icons/Close.js');
require('../../icons/Search.js');
require('../../icons/Instagram.js');
require('../../icons/LinkedIn.js');
require('../../icons/Reddit.js');
require('../../icons/YouTube.js');
require('../../icons/Update.js');
require('../../icons/Facebook.js');
require('../../icons/Cart.js');
require('../../icons/Menu.js');
require('../../icons/ShowPassword.js');
require('../../icons/HidePassword.js');
require('../../icons/Collection.js');
require('../../icons/Sprout.js');
require('../../icons/Verify.js');
require('../../icons/User.js');
require('../../icons/Convert.js');
require('../../icons/Deposit.js');
require('../../icons/Send.js');
require('../../icons/Receive.js');
require('../../icons/To.js');
require('../../icons/Withdraw.js');
require('../../icons/Clock.js');
require('../../icons/Play.js');
require('../../icons/Help.js');
require('../../icons/CloseSmall.js');
require('../../icons/MinusSmall.js');
require('../../icons/PlusSmall.js');
require('../../icons/Dropdown.js');
var SliderBox = styles.styled("div")(function (_a) {
var _b;
var theme = _a.theme;
return (_b = {
".slick-slider": {
position: "static"
},
".slick-list": {
overflow: "visible",
marginRight: theme.spacing(-5)
},
".slick-slide": {
paddingRight: theme.spacing(5)
}
},
_b[theme.breakpoints.down("sm")] = {
paddingRight: theme.spacing(1),
marginBottom: theme.spacing(2),
".slick-slider": {
position: "relative"
},
".slick-list": {
marginRight: theme.spacing(-1.75)
},
".slick-slide": {
paddingRight: theme.spacing(1.75)
}
},
_b);
});
var SlickNextArrow = styles.styled(components_Button["default"])(function (_a) {
var _b;
var theme = _a.theme;
return (_b = {
width: "auto !important",
height: "auto !important",
position: "absolute",
zIndex: 11,
opacity: "1",
right: theme.spacing(2) + " !important",
padding: theme.spacing(1) + " !important",
"&:before": {
display: "none"
},
"&:hover, &:after, &:focus": {
transform: "translate(0, -50%) scale(1.05) !important",
backgroundColor: theme.palette.gray.white + " !important",
color: theme.palette.text.primary + " !important"
},
"&.MuiButton-root.slick-disabled": {
opacity: "0 !important"
}
},
_b[theme.breakpoints.down("sm")] = {
top: "100% !important",
margin: "0 !important",
transform: "translate(-50%, -55%) !important",
left: "58% !important",
right: "auto !important",
"&:hover, &:after, &:focus": {
transform: "translate(-50%, -55%) !important"
},
"&.MuiButton-root": {
backgroundColor: "#F7F7F7 !important",
boxShadow: "none !important"
},
"&.MuiButton-root.slick-disabled": {
opacity: "0.8 !important"
}
},
_b);
});
var SlickPrevArrow = styles.styled(SlickNextArrow)(function (_a) {
var _b;
var theme = _a.theme;
return (_b = {
left: theme.spacing(2) + " !important",
right: "auto !important"
},
_b[theme.breakpoints.down("sm")] = {
right: "46% !important",
left: "auto !important"
},
_b);
});
var SampleNextArrow = function (props) {
var className = props.className, style = props.style, onClick = props.onClick;
return (jsxRuntime.jsx(SlickNextArrow, { variant: "contained", color: "inverse", style: tslib_es6.__assign({}, style), onClick: onClick, className: className, size: "sm", startIcon: jsxRuntime.jsx(components_Icon["default"], { iconKey: "chevronRight", color: "primary", size: "sm" }, void 0) }, void 0));
};
var SamplePrevArrow = function (props) {
var className = props.className, style = props.style, onClick = props.onClick;
return (jsxRuntime.jsx(SlickPrevArrow, { variant: "contained", color: "inverse", style: tslib_es6.__assign({}, style), onClick: onClick, className: className, size: "sm", startIcon: jsxRuntime.jsx(components_Icon["default"], { iconKey: "chevronLeft", color: "primary", size: "sm" }, void 0) }, void 0));
};
var defaultSettings = {
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
draggable: false,
arrows: true,
nextArrow: jsxRuntime.jsx(SampleNextArrow, {}, void 0),
prevArrow: jsxRuntime.jsx(SamplePrevArrow, {}, void 0),
responsive: [
{
breakpoint: 2080,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 580,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
};
var CardSliderComponent = function (_a) {
var children = _a.children, props = tslib_es6.__rest(_a, ["children"]);
return jsxRuntime.jsx(SliderBox, tslib_es6.__assign({}, props, { children: children }), void 0);
};
exports.SampleNextArrow = SampleNextArrow;
exports.SamplePrevArrow = SamplePrevArrow;
exports.SlickNextArrow = SlickNextArrow;
exports.SlickPrevArrow = SlickPrevArrow;
exports.SliderBox = SliderBox;
exports["default"] = CardSliderComponent;
exports.defaultSettings = defaultSettings;