@navinc/base-react-components
Version:
Nav's Pattern Library
65 lines (64 loc) • 2.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import styled from 'styled-components';
import { StandardCard } from './standard-card.js';
import { Carousel } from './carousel';
const TopWave = 'https://design-assets.nav.com/illustrations/color-wave-down.svg';
const CarouselCardHeader = styled.div.withConfig({ displayName: "brc-sc-CarouselCardHeader", componentId: "brc-sc-1mu5nvr" }) `
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
text-align: center;
`;
const CarouselCardFooter = styled.div.withConfig({ displayName: "brc-sc-CarouselCardFooter", componentId: "brc-sc-d2kfrb" }) `
display: flex;
flex-direction: column;
align-items: center;
padding: 0 16px;
`;
const CarouselCardContent = styled.div.withConfig({ displayName: "brc-sc-CarouselCardContent", componentId: "brc-sc-13haaay" }) `
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 48px;
`;
const CarouselCardBg = styled.div.withConfig({ displayName: "brc-sc-CarouselCardBg", componentId: "brc-sc-z5byn0" }) `
z-index: 1;
position: absolute;
width: 100%;
left: 0;
top: 0;
right: 0;
height: 50%;
background-image: url(${TopWave});
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
`;
const CarouselCardContainer = styled.div.withConfig({ displayName: "brc-sc-CarouselCardContainer", componentId: "brc-sc-17pthjt" }) `
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
z-index: 2;
gap: 24px;
${CarouselCardHeader} {
& * {
color: ${({ theme }) => theme.navNeutralLight};
}
}
`;
export const CarouselCardBase = ({ renderHeader, renderFooter, children, carouselProps = {}, }) => {
const [index, setIndex] = useState(0);
// Sync with the activeIndex of carousel component
const handleSlideChange = ({ activeIndex }) => {
setIndex(activeIndex);
};
return (_jsxs(StandardCard, { children: [_jsx(CarouselCardBg, {}), _jsxs(CarouselCardContainer, { "data-testid": "carousel-card", children: [renderHeader && (_jsx(CarouselCardHeader, { "data-testid": "carousel-card:header", children: renderHeader({ index }) })), _jsx(CarouselCardContent, { children: _jsx(Carousel, Object.assign({}, carouselProps, { onSlideChange: handleSlideChange, children: children })) }), renderFooter && (_jsx(CarouselCardFooter, { "data-testid": "carousel-card:footer", children: renderFooter({ index }) }))] })] }));
};
CarouselCardBase.displayName = 'CarouselCard';
const StyledCarouselCardExp = styled(CarouselCardBase).withConfig({ displayName: "brc-sc-StyledCarouselCardExp", componentId: "brc-sc-te4q33" }) ``;
export { StyledCarouselCardExp as CarouselCard };
//# sourceMappingURL=carousel-card.js.map