@razorpay/blade
Version:
The Design System that powers Razorpay
73 lines (70 loc) • 2.53 kB
JavaScript
import 'react';
import styled from 'styled-components';
import '../../utils/makeMotionTime/index.web.js';
import { castWebType } from '../../utils/platform/castUtils.js';
import '../BladeProvider/index.js';
import '../Card/index.js';
import '../Box/index.js';
import { jsx } from 'react/jsx-runtime';
import useTheme from '../BladeProvider/useTheme.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
import { Box } from '../Box/Box.js';
import { Card, CardBody } from '../Card/Card.js';
var StyledThumbnailImage = /*#__PURE__*/styled.img.withConfig({
displayName: "LightBoxThumbnailStripweb__StyledThumbnailImage",
componentId: "amkrn0-0"
})({
width: '100%',
height: '100%',
objectFit: 'cover',
display: 'block'
});
var LightBoxThumbnailStrip = function LightBoxThumbnailStrip(_ref) {
var items = _ref.items,
activeIndex = _ref.activeIndex,
onSelect = _ref.onSelect;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var thumbnailOpacityTransition = "opacity ".concat(makeMotionTime(theme.motion.duration.quick), " ").concat(castWebType(theme.motion.easing.standard));
return /*#__PURE__*/jsx(Box, {
display: "flex",
flexDirection: "row",
gap: "spacing.3",
overflowX: "auto",
padding: "spacing.3",
justifyContent: "center",
flexShrink: "0",
children: items.map(function (item, i) {
var _item$alt, _item$alt2;
return /*#__PURE__*/jsx(Card, {
onClick: function onClick(e) {
e.stopPropagation();
onSelect(i);
},
isSelected: i === activeIndex,
opacity: i === activeIndex ? 1 : 0.7,
transition: thumbnailOpacityTransition,
padding: "spacing.0",
accessibilityLabel: (_item$alt = item.alt) !== null && _item$alt !== void 0 ? _item$alt : "Item ".concat(i + 1),
width: "80px",
height: "80px",
flexShrink: "0",
children: /*#__PURE__*/jsx(CardBody, {
height: "100%",
children: /*#__PURE__*/jsx(Box, {
overflow: "hidden",
borderRadius: "medium",
width: "100%",
height: "100%",
children: /*#__PURE__*/jsx(StyledThumbnailImage, {
src: item.thumbnail,
alt: (_item$alt2 = item.alt) !== null && _item$alt2 !== void 0 ? _item$alt2 : "Thumbnail ".concat(i + 1)
})
})
})
}, i);
})
});
};
export { LightBoxThumbnailStrip };
//# sourceMappingURL=LightBoxThumbnailStrip.web.js.map