pipesol-notificationbar 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -0
- package/dist/app/layout.d.ts +6 -0
- package/dist/app/layout.js +19 -0
- package/dist/app/layout.js.map +1 -0
- package/dist/app/page.d.ts +1 -0
- package/dist/app/page.js +6 -0
- package/dist/app/page.js.map +1 -0
- package/dist/components/ImageResponsive.d.ts +13 -0
- package/dist/components/ImageResponsive.js +32 -0
- package/dist/components/ImageResponsive.js.map +1 -0
- package/dist/components/Location.d.ts +15 -0
- package/dist/components/Location.js +37 -0
- package/dist/components/Location.js.map +1 -0
- package/dist/components/MensagemDeploy.d.ts +7 -0
- package/dist/components/MensagemDeploy.js +54 -0
- package/dist/components/MensagemDeploy.js.map +1 -0
- package/dist/components/NotificationBar.d.ts +16 -0
- package/dist/components/NotificationBar.js +119 -0
- package/dist/components/NotificationBar.js.map +1 -0
- package/dist/components/VideoPlayer.d.ts +11 -0
- package/dist/components/VideoPlayer.js +12 -0
- package/dist/components/VideoPlayer.js.map +1 -0
- package/dist/components/banner/BannerVideo.d.ts +7 -0
- package/dist/components/banner/BannerVideo.js +20 -0
- package/dist/components/banner/BannerVideo.js.map +1 -0
- package/dist/components/banner/ContentBannerStyled.d.ts +6 -0
- package/dist/components/banner/ContentBannerStyled.js +44 -0
- package/dist/components/banner/ContentBannerStyled.js.map +1 -0
- package/dist/components/banner/ResponsiveBanner.d.ts +15 -0
- package/dist/components/banner/ResponsiveBanner.js +68 -0
- package/dist/components/banner/ResponsiveBanner.js.map +1 -0
- package/dist/components/banner/ResponsiveBannerGradiente.d.ts +12 -0
- package/dist/components/banner/ResponsiveBannerGradiente.js +38 -0
- package/dist/components/banner/ResponsiveBannerGradiente.js.map +1 -0
- package/dist/components/banner/TitleBanner.d.ts +10 -0
- package/dist/components/banner/TitleBanner.js +8 -0
- package/dist/components/banner/TitleBanner.js.map +1 -0
- package/dist/components/barra_ferramentas/BarraFerramentas.d.ts +13 -0
- package/dist/components/barra_ferramentas/BarraFerramentas.js +39 -0
- package/dist/components/barra_ferramentas/BarraFerramentas.js.map +1 -0
- package/dist/components/barra_ferramentas/BarraFerramentasHamburguer.d.ts +13 -0
- package/dist/components/barra_ferramentas/BarraFerramentasHamburguer.js +31 -0
- package/dist/components/barra_ferramentas/BarraFerramentasHamburguer.js.map +1 -0
- package/dist/components/barra_ferramentas/BarraFerramentasStyled.d.ts +7 -0
- package/dist/components/barra_ferramentas/BarraFerramentasStyled.js +40 -0
- package/dist/components/barra_ferramentas/BarraFerramentasStyled.js.map +1 -0
- package/dist/components/button/ButtonStyled.d.ts +18 -0
- package/dist/components/button/ButtonStyled.js +56 -0
- package/dist/components/button/ButtonStyled.js.map +1 -0
- package/dist/components/button/NavigationButton.d.ts +18 -0
- package/dist/components/button/NavigationButton.js +53 -0
- package/dist/components/button/NavigationButton.js.map +1 -0
- package/dist/components/button/NavigationButtonMotion.d.ts +19 -0
- package/dist/components/button/NavigationButtonMotion.js +64 -0
- package/dist/components/button/NavigationButtonMotion.js.map +1 -0
- package/dist/components/button/NavigationHamburguerButton.d.ts +17 -0
- package/dist/components/button/NavigationHamburguerButton.js +33 -0
- package/dist/components/button/NavigationHamburguerButton.js.map +1 -0
- package/dist/components/button/ScrollToTopButton.d.ts +10 -0
- package/dist/components/button/ScrollToTopButton.js +44 -0
- package/dist/components/button/ScrollToTopButton.js.map +1 -0
- package/dist/components/button/WhatsAppButton.d.ts +6 -0
- package/dist/components/button/WhatsAppButton.js +24 -0
- package/dist/components/button/WhatsAppButton.js.map +1 -0
- package/dist/components/button/WhatsAppIcon.d.ts +6 -0
- package/dist/components/button/WhatsAppIcon.js +18 -0
- package/dist/components/button/WhatsAppIcon.js.map +1 -0
- package/dist/components/cards/AnimatedCardGroup.d.ts +20 -0
- package/dist/components/cards/AnimatedCardGroup.js +63 -0
- package/dist/components/cards/AnimatedCardGroup.js.map +1 -0
- package/dist/components/cards/BorderTopLeftRadiusCard.d.ts +15 -0
- package/dist/components/cards/BorderTopLeftRadiusCard.js +67 -0
- package/dist/components/cards/BorderTopLeftRadiusCard.js.map +1 -0
- package/dist/components/cards/CardLerMais.d.ts +13 -0
- package/dist/components/cards/CardLerMais.js +121 -0
- package/dist/components/cards/CardLerMais.js.map +1 -0
- package/dist/components/cards/ContentCardDescription.d.ts +10 -0
- package/dist/components/cards/ContentCardDescription.js +52 -0
- package/dist/components/cards/ContentCardDescription.js.map +1 -0
- package/dist/components/cards/GradientCard.d.ts +17 -0
- package/dist/components/cards/GradientCard.js +66 -0
- package/dist/components/cards/GradientCard.js.map +1 -0
- package/dist/components/cards/ImageCard.d.ts +15 -0
- package/dist/components/cards/ImageCard.js +31 -0
- package/dist/components/cards/ImageCard.js.map +1 -0
- package/dist/components/cards/MapCard.d.ts +15 -0
- package/dist/components/cards/MapCard.js +59 -0
- package/dist/components/cards/MapCard.js.map +1 -0
- package/dist/components/cards/ShadowCard.d.ts +16 -0
- package/dist/components/cards/ShadowCard.js +25 -0
- package/dist/components/cards/ShadowCard.js.map +1 -0
- package/dist/components/cards/TestimonialCard.d.ts +22 -0
- package/dist/components/cards/TestimonialCard.js +66 -0
- package/dist/components/cards/TestimonialCard.js.map +1 -0
- package/dist/components/cards/YoutubeCard.d.ts +14 -0
- package/dist/components/cards/YoutubeCard.js +85 -0
- package/dist/components/cards/YoutubeCard.js.map +1 -0
- package/dist/components/carousel/CarouselStyled.d.ts +62 -0
- package/dist/components/carousel/CarouselStyled.js +31 -0
- package/dist/components/carousel/CarouselStyled.js.map +1 -0
- package/dist/components/carousel/Carrossel.d.ts +15 -0
- package/dist/components/carousel/Carrossel.js +113 -0
- package/dist/components/carousel/Carrossel.js.map +1 -0
- package/dist/components/containers/ContainerAnimatedIndex.d.ts +6 -0
- package/dist/components/containers/ContainerAnimatedIndex.js +11 -0
- package/dist/components/containers/ContainerAnimatedIndex.js.map +1 -0
- package/dist/components/containers/ContainerAnimatedScroll.d.ts +9 -0
- package/dist/components/containers/ContainerAnimatedScroll.js +10 -0
- package/dist/components/containers/ContainerAnimatedScroll.js.map +1 -0
- package/dist/components/containers/ContainerSafe.d.ts +6 -0
- package/dist/components/containers/ContainerSafe.js +78 -0
- package/dist/components/containers/ContainerSafe.js.map +1 -0
- package/dist/components/containers/containerStyled.d.ts +1 -0
- package/dist/components/containers/containerStyled.js +10 -0
- package/dist/components/containers/containerStyled.js.map +1 -0
- package/dist/components/footer/Copywrite.d.ts +10 -0
- package/dist/components/footer/Copywrite.js +23 -0
- package/dist/components/footer/Copywrite.js.map +1 -0
- package/dist/components/footer/CopywriteCenter.d.ts +9 -0
- package/dist/components/footer/CopywriteCenter.js +34 -0
- package/dist/components/footer/CopywriteCenter.js.map +1 -0
- package/dist/components/footer/Footer.d.ts +10 -0
- package/dist/components/footer/Footer.js +41 -0
- package/dist/components/footer/Footer.js.map +1 -0
- package/dist/components/footer/NotificationBar.d.ts +13 -0
- package/dist/components/footer/NotificationBar.js +57 -0
- package/dist/components/footer/NotificationBar.js.map +1 -0
- package/dist/components/footer/SiteMap.d.ts +9 -0
- package/dist/components/footer/SiteMap.js +24 -0
- package/dist/components/footer/SiteMap.js.map +1 -0
- package/dist/components/footer/footerStyled.d.ts +8 -0
- package/dist/components/footer/footerStyled.js +62 -0
- package/dist/components/footer/footerStyled.js.map +1 -0
- package/dist/components/form/Form.d.ts +17 -0
- package/dist/components/form/Form.js +96 -0
- package/dist/components/form/Form.js.map +1 -0
- package/dist/components/form/FormStyled.d.ts +27 -0
- package/dist/components/form/FormStyled.js +95 -0
- package/dist/components/form/FormStyled.js.map +1 -0
- package/dist/components/header/HeaderBarIn.d.ts +15 -0
- package/dist/components/header/HeaderBarIn.js +40 -0
- package/dist/components/header/HeaderBarIn.js.map +1 -0
- package/dist/components/header/HeaderBarTop.d.ts +12 -0
- package/dist/components/header/HeaderBarTop.js +30 -0
- package/dist/components/header/HeaderBarTop.js.map +1 -0
- package/dist/components/section/Section.d.ts +9 -0
- package/dist/components/section/Section.js +19 -0
- package/dist/components/section/Section.js.map +1 -0
- package/dist/components/section/SectionGradiente.d.ts +9 -0
- package/dist/components/section/SectionGradiente.js +19 -0
- package/dist/components/section/SectionGradiente.js.map +1 -0
- package/dist/components/section/SectionImage.d.ts +7 -0
- package/dist/components/section/SectionImage.js +21 -0
- package/dist/components/section/SectionImage.js.map +1 -0
- package/dist/components/section/SectionStyled.d.ts +9 -0
- package/dist/components/section/SectionStyled.js +46 -0
- package/dist/components/section/SectionStyled.js.map +1 -0
- package/dist/components/social_media/SocialMediaIconLink.d.ts +8 -0
- package/dist/components/social_media/SocialMediaIconLink.js +13 -0
- package/dist/components/social_media/SocialMediaIconLink.js.map +1 -0
- package/dist/components/social_media/SocialMediaIconLinkWithBorder.d.ts +12 -0
- package/dist/components/social_media/SocialMediaIconLinkWithBorder.js +18 -0
- package/dist/components/social_media/SocialMediaIconLinkWithBorder.js.map +1 -0
- package/dist/components/substask/SubstackPage.d.ts +5 -0
- package/dist/components/substask/SubstackPage.js +22 -0
- package/dist/components/substask/SubstackPage.js.map +1 -0
- package/dist/components/substask/SubstackPosts.d.ts +9 -0
- package/dist/components/substask/SubstackPosts.js +6 -0
- package/dist/components/substask/SubstackPosts.js.map +1 -0
- package/dist/components/text/IconText.d.ts +11 -0
- package/dist/components/text/IconText.js +26 -0
- package/dist/components/text/IconText.js.map +1 -0
- package/dist/components/text/InfiniteTicker.d.ts +15 -0
- package/dist/components/text/InfiniteTicker.js +49 -0
- package/dist/components/text/InfiniteTicker.js.map +1 -0
- package/dist/components/text/SpanStyled.d.ts +6 -0
- package/dist/components/text/SpanStyled.js +34 -0
- package/dist/components/text/SpanStyled.js.map +1 -0
- package/dist/components/text/TextWithSeparador.d.ts +7 -0
- package/dist/components/text/TextWithSeparador.js +9 -0
- package/dist/components/text/TextWithSeparador.js.map +1 -0
- package/dist/hooks/useResponsive.d.ts +9 -0
- package/dist/hooks/useResponsive.js +14 -0
- package/dist/hooks/useResponsive.js.map +1 -0
- package/dist/hooks/useResponsiveCarousel.d.ts +15 -0
- package/dist/hooks/useResponsiveCarousel.js +36 -0
- package/dist/hooks/useResponsiveCarousel.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/pages/_app.d.ts +2 -0
- package/dist/pages/_app.js +20 -0
- package/dist/pages/_app.js.map +1 -0
- package/dist/pages/_document.d.ts +9 -0
- package/dist/pages/_document.js +33 -0
- package/dist/pages/_document.js.map +1 -0
- package/dist/theme.d.ts +35 -0
- package/dist/theme.js +142 -0
- package/dist/theme.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/types/AnimatedCardData.d.ts +6 -0
- package/dist/types/AnimatedCardData.js +2 -0
- package/dist/types/AnimatedCardData.js.map +1 -0
- package/dist/types/BannerResponsiveConfig.d.ts +4 -0
- package/dist/types/BannerResponsiveConfig.js +2 -0
- package/dist/types/BannerResponsiveConfig.js.map +1 -0
- package/dist/types/ItemMenuConfig.d.ts +4 -0
- package/dist/types/ItemMenuConfig.js +2 -0
- package/dist/types/ItemMenuConfig.js.map +1 -0
- package/dist/types/ShadowConfig.d.ts +6 -0
- package/dist/types/ShadowConfig.js +2 -0
- package/dist/types/ShadowConfig.js.map +1 -0
- package/package.json +45 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import 'react-responsive-carousel/lib/styles/carousel.min.css';
|
|
3
|
+
import { Box, styled } from '@mui/material';
|
|
4
|
+
import Image from 'next/image';
|
|
5
|
+
const Container = styled(Box, {
|
|
6
|
+
shouldForwardProp: (prop) => !['border_radius', 'background_color',
|
|
7
|
+
'margin_card', 'flex_direction'].includes(prop),
|
|
8
|
+
})(({ border_radius, background_color, margin_card, flex_direction }) => ({
|
|
9
|
+
display: 'flex',
|
|
10
|
+
flexDirection: flex_direction,
|
|
11
|
+
borderRadius: border_radius,
|
|
12
|
+
width: 'fit-content',
|
|
13
|
+
height: 'fit-content',
|
|
14
|
+
backgroundColor: background_color,
|
|
15
|
+
margin: margin_card,
|
|
16
|
+
}));
|
|
17
|
+
const DivImage = styled('div', {
|
|
18
|
+
shouldForwardProp: (prop) => !['border_radius', 'width', 'height'].includes(prop),
|
|
19
|
+
})(({ border_radius, height }) => ({
|
|
20
|
+
width: 'fit-content',
|
|
21
|
+
height: `${height}px`,
|
|
22
|
+
position: 'relative',
|
|
23
|
+
overflow: 'hidden',
|
|
24
|
+
borderRadius: `${border_radius} ${border_radius} 0 0`,
|
|
25
|
+
}));
|
|
26
|
+
const ImageCard = ({ src, alt, widthImage, heightImage, border_radius = '0px', background_color = 'transparent', margin = '0px', flex_direction = 'row', children, }) => {
|
|
27
|
+
const borderRadius = flex_direction == 'column' ? `${border_radius} ${border_radius} 0 0` : border_radius;
|
|
28
|
+
return (_jsxs(Container, { border_radius: border_radius, background_color: background_color, margin_card: margin, flex_direction: flex_direction, children: [_jsx(DivImage, { border_radius: borderRadius, height: heightImage, children: _jsx(Image, { src: src, alt: alt, width: widthImage, height: heightImage, style: { objectFit: 'cover', borderRadius: borderRadius }, quality: 80 }) }), _jsx(Box, { sx: { height: 'auto', flex: '1' }, children: children })] }));
|
|
29
|
+
};
|
|
30
|
+
export default ImageCard;
|
|
31
|
+
//# sourceMappingURL=ImageCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageCard.js","sourceRoot":"","sources":["../../../src/components/cards/ImageCard.tsx"],"names":[],"mappings":";AACA,OAAO,uDAAuD,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,eAAe,EAAE,kBAAkB;QACnC,aAAa,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC9D,CAAC,CAKC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAC/B,WAAW,EAAE,cAAc,EAAC,EAAE,EAAE,CAAC,CAAC;IACtC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,cAAc;IAC7B,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,aAAa;IACrB,eAAe,EAAE,gBAAgB;IACjC,MAAM,EAAE,WAAW;CACpB,CAAC,CAAC,CAAC;AAEJ,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,EAAE;IAC7B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,eAAe,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CACjE,CAAC,CAGC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACjC,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,GAAG,MAAM,IAAI;IACrB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,GAAG,aAAa,IAAI,aAAa,MAAM;CACtD,CAAC,CAAC,CAAC;AAcJ,MAAM,SAAS,GAA6B,CAAC,EAC3C,GAAG,EACH,GAAG,EACH,UAAU,EACV,WAAW,EACX,aAAa,GAAG,KAAK,EACrB,gBAAgB,GAAG,aAAa,EAChC,MAAM,GAAG,KAAK,EACd,cAAc,GAAG,KAAK,EACtB,QAAQ,GACT,EAAE,EAAE;IAED,MAAM,YAAY,GAAG,cAAc,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG,aAAa,IAAI,aAAa,MAAM,CAAC,CAAC,CAAE,aAAa,CAAC;IAE3G,OAAO,CACH,MAAC,SAAS,IAAC,aAAa,EAAE,aAAa,EACrC,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,MAAM,EACnB,cAAc,EAAE,cAAc,aAE9B,KAAC,QAAQ,IAAC,aAAa,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,YACxD,KAAC,KAAK,IACJ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAC,EACxD,OAAO,EAAE,EAAE,GACX,GACO,EACX,KAAC,GAAG,IAAC,EAAE,EAAE,EAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAC,YACjC,QAAQ,GACL,IACI,CACb,CAAC;AACR,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface MapCardProps {
|
|
3
|
+
srcGoogle: string;
|
|
4
|
+
titleFrame: string;
|
|
5
|
+
width_map: string;
|
|
6
|
+
height_map: string;
|
|
7
|
+
border_radius?: string;
|
|
8
|
+
background_color?: string;
|
|
9
|
+
margin?: string;
|
|
10
|
+
flex_direction?: 'row' | 'column';
|
|
11
|
+
root_margin?: string;
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
declare const MapCard: React.FC<MapCardProps>;
|
|
15
|
+
export default MapCard;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState, useEffect } from 'react';
|
|
3
|
+
import { Box, styled } from '@mui/material';
|
|
4
|
+
const Container = styled(Box, {
|
|
5
|
+
shouldForwardProp: (prop) => !['border_radius', 'background_color', 'margin_card', 'width_card', 'flex_direction'].includes(prop),
|
|
6
|
+
})(({ border_radius, background_color, margin_card, width_card, flex_direction }) => ({
|
|
7
|
+
display: 'flex',
|
|
8
|
+
flexDirection: flex_direction,
|
|
9
|
+
borderRadius: border_radius,
|
|
10
|
+
width: width_card,
|
|
11
|
+
height: 'fit-content',
|
|
12
|
+
backgroundColor: background_color,
|
|
13
|
+
margin: margin_card,
|
|
14
|
+
}));
|
|
15
|
+
const Map = styled('div', {
|
|
16
|
+
shouldForwardProp: (prop) => !['border_radius', 'width', 'height'].includes(prop),
|
|
17
|
+
})(({ border_radius, width, height }) => ({
|
|
18
|
+
width: width,
|
|
19
|
+
height: height,
|
|
20
|
+
borderRadius: `${border_radius} ${border_radius} 0 0`,
|
|
21
|
+
position: 'relative',
|
|
22
|
+
overflow: 'hidden',
|
|
23
|
+
}));
|
|
24
|
+
const Content = styled('div')({
|
|
25
|
+
height: 'auto',
|
|
26
|
+
padding: '20px 8px',
|
|
27
|
+
flex: 1,
|
|
28
|
+
});
|
|
29
|
+
const MapCard = ({ srcGoogle, titleFrame, width_map, height_map, border_radius = '0px', background_color = 'transparent', margin = '0px', flex_direction = 'row', root_margin = '300px', children, }) => {
|
|
30
|
+
const [shouldLoad, setShouldLoad] = useState(false);
|
|
31
|
+
const mapRef = useRef(null);
|
|
32
|
+
const borderRadius = flex_direction === 'column' ? `${border_radius} ${border_radius} 0 0` : border_radius;
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
const observer = new IntersectionObserver((entries) => {
|
|
35
|
+
const entry = entries[0];
|
|
36
|
+
if (entry.isIntersecting) {
|
|
37
|
+
setShouldLoad(true);
|
|
38
|
+
observer.disconnect();
|
|
39
|
+
}
|
|
40
|
+
}, {
|
|
41
|
+
threshold: 0,
|
|
42
|
+
rootMargin: root_margin, // Comece a observar 300px antes do componente realmente entrar na tela
|
|
43
|
+
});
|
|
44
|
+
if (mapRef.current) {
|
|
45
|
+
observer.observe(mapRef.current);
|
|
46
|
+
}
|
|
47
|
+
return () => {
|
|
48
|
+
observer.disconnect();
|
|
49
|
+
};
|
|
50
|
+
}, []);
|
|
51
|
+
return (_jsxs(Container, { border_radius: border_radius, background_color: background_color, margin_card: margin, width_card: "fit-content", flex_direction: flex_direction, children: [_jsx(Map, { ref: mapRef, border_radius: borderRadius, width: width_map, height: height_map, children: shouldLoad && (_jsx("iframe", { src: srcGoogle, title: titleFrame, style: {
|
|
52
|
+
width: '100%',
|
|
53
|
+
height: '100%',
|
|
54
|
+
border: '0',
|
|
55
|
+
borderRadius: borderRadius,
|
|
56
|
+
}, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" })) }), _jsx(Content, { children: children })] }));
|
|
57
|
+
};
|
|
58
|
+
export default MapCard;
|
|
59
|
+
//# sourceMappingURL=MapCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MapCard.js","sourceRoot":"","sources":["../../../src/components/cards/MapCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import 'react-responsive-carousel/lib/styles/carousel.min.css';
|
|
3
|
+
import { ShadowConfig } from '@/types/ShadowConfig';
|
|
4
|
+
interface ShadowCardProps {
|
|
5
|
+
width: string;
|
|
6
|
+
height: string;
|
|
7
|
+
border_radius?: string;
|
|
8
|
+
background_color?: string;
|
|
9
|
+
margin?: string;
|
|
10
|
+
padding?: string;
|
|
11
|
+
sombraClara: ShadowConfig;
|
|
12
|
+
sombraEscura: ShadowConfig;
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
declare const ShadowCard: React.FC<ShadowCardProps>;
|
|
16
|
+
export default ShadowCard;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import 'react-responsive-carousel/lib/styles/carousel.min.css';
|
|
3
|
+
import { Box, styled } from '@mui/material';
|
|
4
|
+
const Container = styled(Box, {
|
|
5
|
+
shouldForwardProp: (prop) => !['border_radius', 'background_color', 'margin_card', 'width_card',
|
|
6
|
+
'height_card', 'sombraClara', 'sombraEscura', 'padding'].includes(prop),
|
|
7
|
+
})(({ border_radius, background_color, margin_card, sombraClara, sombraEscura, width_card, height_card, padding }) => ({
|
|
8
|
+
borderRadius: border_radius,
|
|
9
|
+
width: width_card,
|
|
10
|
+
height: height_card,
|
|
11
|
+
backgroundColor: background_color,
|
|
12
|
+
margin: margin_card,
|
|
13
|
+
padding: padding,
|
|
14
|
+
boxShadow: `
|
|
15
|
+
${sombraClara.offsetX} ${sombraClara.offsetY} ${sombraClara.blur} ${sombraClara.color},
|
|
16
|
+
${sombraEscura.offsetX} ${sombraEscura.offsetY} ${sombraEscura.blur} ${sombraEscura.color}
|
|
17
|
+
`,
|
|
18
|
+
borderTop: `3px solid ${sombraClara.color}`,
|
|
19
|
+
borderLeft: `3px solid ${sombraClara.color}`
|
|
20
|
+
}));
|
|
21
|
+
const ShadowCard = ({ width, height, border_radius = '0px', background_color = 'transparent', margin = '0px', padding = '20px', sombraClara, sombraEscura, children, }) => {
|
|
22
|
+
return (_jsx(Container, { border_radius: border_radius, background_color: background_color, margin_card: margin, padding: padding, sombraClara: sombraClara, sombraEscura: sombraEscura, width_card: width, height_card: height, children: children }));
|
|
23
|
+
};
|
|
24
|
+
export default ShadowCard;
|
|
25
|
+
//# sourceMappingURL=ShadowCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ShadowCard.js","sourceRoot":"","sources":["../../../src/components/cards/ShadowCard.tsx"],"names":[],"mappings":";AACA,OAAO,uDAAuD,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAG5C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,eAAe,EAAE,kBAAkB,EAAE,aAAa,EAAC,YAAY;QAC/D,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CACtF,CAAC,CASC,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAChD,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACnE,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,UAAU;IACjB,MAAM,EAAE,WAAW;IACnB,eAAe,EAAE,gBAAgB;IACjC,MAAM,EAAE,WAAW;IACnB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE;MACP,WAAW,CAAC,OAAO,IAAI,WAAW,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,KAAK;MACnF,YAAY,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,IAAI,YAAY,CAAC,KAAK;GAC1F;IACD,SAAS,EAAE,aAAa,WAAW,CAAC,KAAK,EAAE;IAC3C,UAAU,EAAE,aAAa,WAAW,CAAC,KAAK,EAAE;CAC7C,CAAC,CAAC,CAAC;AAcJ,MAAM,UAAU,GAA8B,CAAC,EAC7C,KAAK,EACL,MAAM,EACN,aAAa,GAAG,KAAK,EACrB,gBAAgB,GAAG,aAAa,EAChC,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,MAAM,EAChB,WAAW,EACX,YAAY,EACZ,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,SAAS,IACR,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,MAAM,YAElB,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ContainerStyledProps {
|
|
3
|
+
color_boxshadow: string;
|
|
4
|
+
background_color: string;
|
|
5
|
+
width: string;
|
|
6
|
+
height: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const ContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ContainerStyledProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
|
+
interface TestimonialCardProps {
|
|
10
|
+
background_color?: string;
|
|
11
|
+
color: string;
|
|
12
|
+
color_icon: string;
|
|
13
|
+
height: string;
|
|
14
|
+
width: string;
|
|
15
|
+
color_boxshadow?: string;
|
|
16
|
+
name: string;
|
|
17
|
+
socialMedia?: string;
|
|
18
|
+
urlSocialMedia?: string;
|
|
19
|
+
children: React.ReactNode;
|
|
20
|
+
}
|
|
21
|
+
declare const TestimonialCard: React.FC<TestimonialCardProps>;
|
|
22
|
+
export default TestimonialCard;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { styled } from '@mui/material';
|
|
3
|
+
import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
|
|
4
|
+
import NavigationButton from '../button/NavigationButton';
|
|
5
|
+
export const ContainerStyled = styled('div', {
|
|
6
|
+
shouldForwardProp: (prop) => !['color_boxshadow', 'background_color', 'width', 'height'].includes(prop),
|
|
7
|
+
})(({ color_boxshadow, background_color, width, height }) => ({
|
|
8
|
+
display: 'flex',
|
|
9
|
+
flexDirection: 'column',
|
|
10
|
+
alignItems: 'center', // Centraliza os itens horizontalmente
|
|
11
|
+
justifyContent: 'center', // Centraliza os itens verticalmente
|
|
12
|
+
margin: '20px auto',
|
|
13
|
+
padding: '20px',
|
|
14
|
+
boxShadow: `0 4px 8px ${color_boxshadow}`, // Corrigido para usar camelCase
|
|
15
|
+
backgroundColor: background_color, // Corrigido para usar camelCase
|
|
16
|
+
width: width,
|
|
17
|
+
height: height,
|
|
18
|
+
gap: '16px',
|
|
19
|
+
}));
|
|
20
|
+
const ContentFooterStyled = styled('div', {
|
|
21
|
+
shouldForwardProp: (prop) => !['text_color'].includes(prop),
|
|
22
|
+
})(({ theme, text_color }) => {
|
|
23
|
+
var _a, _b, _c, _d, _e, _f;
|
|
24
|
+
return ({
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'column',
|
|
27
|
+
alignItems: 'center',
|
|
28
|
+
justifyContent: 'center',
|
|
29
|
+
gap: '8px',
|
|
30
|
+
color: text_color,
|
|
31
|
+
fontFamily: theme.typography.fontFamily,
|
|
32
|
+
fontWeight: (_a = theme.typography.body2) === null || _a === void 0 ? void 0 : _a.fontWeight,
|
|
33
|
+
fontStyle: (_b = theme.typography.body2) === null || _b === void 0 ? void 0 : _b.fontStyle,
|
|
34
|
+
lineHeight: (_c = theme.typography.body2) === null || _c === void 0 ? void 0 : _c.lineHeight,
|
|
35
|
+
letterSpacing: (_d = theme.typography.body2) === null || _d === void 0 ? void 0 : _d.letterSpacing,
|
|
36
|
+
fontSize: (_e = theme.typography.body2) === null || _e === void 0 ? void 0 : _e.fontSize,
|
|
37
|
+
margin: (_f = theme.typography.body2) === null || _f === void 0 ? void 0 : _f.margin,
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
const ContentMessageStyled = styled('div')(({ theme }) => {
|
|
41
|
+
var _a, _b, _c, _d, _e, _f;
|
|
42
|
+
return ({
|
|
43
|
+
fontFamily: theme.typography.fontFamily,
|
|
44
|
+
fontWeight: (_a = theme.typography.body1) === null || _a === void 0 ? void 0 : _a.fontWeight,
|
|
45
|
+
fontStyle: (_b = theme.typography.body1) === null || _b === void 0 ? void 0 : _b.fontStyle,
|
|
46
|
+
lineHeight: (_c = theme.typography.body1) === null || _c === void 0 ? void 0 : _c.lineHeight,
|
|
47
|
+
letterSpacing: (_d = theme.typography.body1) === null || _d === void 0 ? void 0 : _d.letterSpacing,
|
|
48
|
+
fontSize: (_e = theme.typography.body1) === null || _e === void 0 ? void 0 : _e.fontSize,
|
|
49
|
+
margin: (_f = theme.typography.body1) === null || _f === void 0 ? void 0 : _f.margin,
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
const QuoteIcon = styled(FormatQuoteIcon, {
|
|
53
|
+
shouldForwardProp: (prop) => !['$color'].includes(prop),
|
|
54
|
+
})(({ $color }) => ({
|
|
55
|
+
color: $color,
|
|
56
|
+
fontSize: '40px',
|
|
57
|
+
marginRight: '10px',
|
|
58
|
+
}));
|
|
59
|
+
const TestimonialCard = ({ children, name, socialMedia, background_color, color, color_icon, color_boxshadow, height, width, urlSocialMedia }) => {
|
|
60
|
+
const card_background_color = background_color !== null && background_color !== void 0 ? background_color : "transparent";
|
|
61
|
+
const card_color_boxshadow = color_boxshadow !== null && color_boxshadow !== void 0 ? color_boxshadow : 'transparent';
|
|
62
|
+
return (_jsxs(ContainerStyled, { background_color: card_background_color, color_boxshadow: card_color_boxshadow, width: width, height: height, children: [_jsx(QuoteIcon, { "$color": color_icon }), _jsx(ContentMessageStyled, { children: children }), _jsxs(ContentFooterStyled, { text_color: color, children: [name, socialMedia && urlSocialMedia &&
|
|
63
|
+
_jsx(NavigationButton, { url: urlSocialMedia, color: color, layout: 'link', aria_label: `link para ${socialMedia}`, width: '100%', text_decoration: 'none', children: socialMedia })] })] }));
|
|
64
|
+
};
|
|
65
|
+
export default TestimonialCard;
|
|
66
|
+
//# sourceMappingURL=TestimonialCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TestimonialCard.js","sourceRoot":"","sources":["../../../src/components/cards/TestimonialCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface YoutubeCardProps {
|
|
3
|
+
srcYoutube: string;
|
|
4
|
+
width: string;
|
|
5
|
+
height_video: string;
|
|
6
|
+
border_radius?: string;
|
|
7
|
+
background_color?: string;
|
|
8
|
+
flex_direction: 'row' | 'column';
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
lazyLoad?: boolean;
|
|
11
|
+
useFacade?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const YoutubeCard: React.FC<YoutubeCardProps>;
|
|
14
|
+
export default YoutubeCard;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useRef, useState, useEffect } from 'react';
|
|
4
|
+
import { styled } from '@mui/material';
|
|
5
|
+
const Container = styled('div', {
|
|
6
|
+
shouldForwardProp: (prop) => !['background_color', 'width_card', 'flex_direction'].includes(prop),
|
|
7
|
+
})(({ background_color, width_card, flex_direction }) => ({
|
|
8
|
+
display: 'flex',
|
|
9
|
+
flexDirection: flex_direction,
|
|
10
|
+
width: width_card,
|
|
11
|
+
backgroundColor: background_color,
|
|
12
|
+
height: 'fit-content',
|
|
13
|
+
overflow: 'hidden',
|
|
14
|
+
borderRadius: '20px',
|
|
15
|
+
}));
|
|
16
|
+
const VideoWrapper = styled('div', {
|
|
17
|
+
shouldForwardProp: (prop) => !['width', 'height'].includes(prop),
|
|
18
|
+
})(({ width, height }) => ({
|
|
19
|
+
width,
|
|
20
|
+
height,
|
|
21
|
+
position: 'relative',
|
|
22
|
+
borderRadius: '20px',
|
|
23
|
+
overflow: 'hidden',
|
|
24
|
+
}));
|
|
25
|
+
const Thumbnail = styled('div')({
|
|
26
|
+
width: '100%',
|
|
27
|
+
height: '100%',
|
|
28
|
+
backgroundSize: 'cover',
|
|
29
|
+
backgroundPosition: 'center',
|
|
30
|
+
cursor: 'pointer',
|
|
31
|
+
position: 'relative',
|
|
32
|
+
display: 'flex',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
justifyContent: 'center',
|
|
35
|
+
});
|
|
36
|
+
const PlayButton = styled('div')({
|
|
37
|
+
width: 60,
|
|
38
|
+
height: 60,
|
|
39
|
+
backgroundColor: 'rgba(0,0,0,0.6)',
|
|
40
|
+
borderRadius: '50%',
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
justifyContent: 'center',
|
|
44
|
+
color: '#fff',
|
|
45
|
+
fontSize: 30,
|
|
46
|
+
zIndex: 2,
|
|
47
|
+
});
|
|
48
|
+
const Content = styled('div')({
|
|
49
|
+
height: 'auto',
|
|
50
|
+
padding: '20px 8px',
|
|
51
|
+
});
|
|
52
|
+
const getYoutubeId = (url) => {
|
|
53
|
+
const match = url.match(/\/embed\/([a-zA-Z0-9_-]+)/);
|
|
54
|
+
return match ? match[1] : null;
|
|
55
|
+
};
|
|
56
|
+
const YoutubeCard = ({ srcYoutube, width, height_video, background_color = 'transparent', flex_direction = 'row', children, lazyLoad = false, useFacade = false, }) => {
|
|
57
|
+
const [isVisible, setIsVisible] = useState(!lazyLoad);
|
|
58
|
+
const [clicked, setClicked] = useState(!useFacade);
|
|
59
|
+
const containerRef = useRef(null);
|
|
60
|
+
const videoId = getYoutubeId(srcYoutube);
|
|
61
|
+
const thumbnail = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
|
|
62
|
+
// Observer para lazyLoad baseado na visibilidade
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
if (!lazyLoad)
|
|
65
|
+
return;
|
|
66
|
+
const observer = new IntersectionObserver(([entry]) => {
|
|
67
|
+
if (entry.isIntersecting) {
|
|
68
|
+
setIsVisible(true);
|
|
69
|
+
observer.disconnect();
|
|
70
|
+
}
|
|
71
|
+
}, { threshold: 0.25 });
|
|
72
|
+
if (containerRef.current) {
|
|
73
|
+
observer.observe(containerRef.current);
|
|
74
|
+
}
|
|
75
|
+
return () => observer.disconnect();
|
|
76
|
+
}, [lazyLoad]);
|
|
77
|
+
const shouldLoadIframe = isVisible && clicked;
|
|
78
|
+
return (_jsxs(Container, { ref: containerRef, background_color: background_color, width_card: width, flex_direction: flex_direction, children: [_jsx(VideoWrapper, { width: width, height: height_video, children: shouldLoadIframe ? (_jsx("iframe", { src: srcYoutube, title: "YouTube video player", style: {
|
|
79
|
+
width: '100%',
|
|
80
|
+
height: '100%',
|
|
81
|
+
border: 0,
|
|
82
|
+
}, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", referrerPolicy: "strict-origin-when-cross-origin", allowFullScreen: true })) : (_jsx(Thumbnail, { style: { backgroundImage: `url(${thumbnail})` }, onClick: () => setClicked(true), children: useFacade && _jsx(PlayButton, { children: "\u25B6" }) })) }), _jsx(Content, { children: children })] }));
|
|
83
|
+
};
|
|
84
|
+
export default YoutubeCard;
|
|
85
|
+
//# sourceMappingURL=YoutubeCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"YoutubeCard.js","sourceRoot":"","sources":["../../../src/components/cards/YoutubeCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { Carousel } from 'react-responsive-carousel';
|
|
2
|
+
import 'react-responsive-carousel/lib/styles/carousel.min.css';
|
|
3
|
+
export declare const CarouselStyled: import("@emotion/styled").StyledComponent<Pick<import("react-responsive-carousel").CarouselProps, never> & {
|
|
4
|
+
width?: string | number | undefined;
|
|
5
|
+
children?: React.ReactChild[] | undefined;
|
|
6
|
+
autoFocus?: boolean | undefined;
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
onChange?: ((index: number, item: React.ReactNode) => void) | undefined;
|
|
9
|
+
autoPlay?: boolean | undefined;
|
|
10
|
+
selectedItem?: number | undefined;
|
|
11
|
+
ariaLabel?: string | undefined | undefined;
|
|
12
|
+
axis?: "vertical" | "horizontal" | undefined;
|
|
13
|
+
centerMode?: boolean | undefined;
|
|
14
|
+
centerSlidePercentage?: number | undefined;
|
|
15
|
+
dynamicHeight?: boolean | undefined;
|
|
16
|
+
emulateTouch?: boolean | undefined;
|
|
17
|
+
infiniteLoop?: boolean | undefined;
|
|
18
|
+
interval?: number | undefined;
|
|
19
|
+
labels?: {
|
|
20
|
+
leftArrow: string;
|
|
21
|
+
rightArrow: string;
|
|
22
|
+
item: string;
|
|
23
|
+
} | undefined;
|
|
24
|
+
onClickItem?: ((index: number, item: React.ReactNode) => void) | undefined;
|
|
25
|
+
onClickThumb?: ((index: number, item: React.ReactNode) => void) | undefined;
|
|
26
|
+
onSwipeStart?: ((event: React.TouchEvent) => void) | undefined;
|
|
27
|
+
onSwipeEnd?: ((event: React.TouchEvent) => void) | undefined;
|
|
28
|
+
onSwipeMove?: ((event: React.TouchEvent) => boolean) | undefined;
|
|
29
|
+
preventMovementUntilSwipeScrollTolerance?: boolean | undefined;
|
|
30
|
+
renderArrowPrev?: ((clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode) | undefined;
|
|
31
|
+
renderArrowNext?: ((clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode) | undefined;
|
|
32
|
+
renderIndicator?: ((clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void, isSelected: boolean, index: number, label: string) => React.ReactNode) | undefined;
|
|
33
|
+
renderItem?: ((item: React.ReactNode, options?: {
|
|
34
|
+
isSelected: boolean;
|
|
35
|
+
isPrevious: boolean;
|
|
36
|
+
}) => React.ReactNode) | undefined;
|
|
37
|
+
renderThumbs?: ((children: React.ReactChild[]) => React.ReactChild[]) | undefined;
|
|
38
|
+
showArrows?: boolean | undefined;
|
|
39
|
+
showStatus?: boolean | undefined;
|
|
40
|
+
showIndicators?: boolean | undefined;
|
|
41
|
+
showThumbs?: boolean | undefined;
|
|
42
|
+
statusFormatter?: ((currentItem: number, total: number) => string) | undefined;
|
|
43
|
+
stopOnHover?: boolean | undefined;
|
|
44
|
+
swipeable?: boolean | undefined;
|
|
45
|
+
swipeScrollTolerance?: number | undefined;
|
|
46
|
+
thumbWidth?: number | undefined;
|
|
47
|
+
transitionTime?: number | undefined;
|
|
48
|
+
useKeyboardArrows?: boolean | undefined;
|
|
49
|
+
verticalSwipe?: "natural" | "standard" | undefined;
|
|
50
|
+
animationHandler?: "slide" | "fade" | import("react-responsive-carousel/lib/ts/components/Carousel/types").AnimationHandler | undefined;
|
|
51
|
+
swipeAnimationHandler?: import("react-responsive-carousel/lib/ts/components/Carousel/types").SwipeAnimationHandler | undefined;
|
|
52
|
+
stopSwipingHandler?: import("react-responsive-carousel/lib/ts/components/Carousel/types").StopSwipingHandler | undefined;
|
|
53
|
+
} & {} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
|
|
54
|
+
width: string;
|
|
55
|
+
height: string;
|
|
56
|
+
margin: string;
|
|
57
|
+
color_indicators: string;
|
|
58
|
+
color_indicator_focus: string;
|
|
59
|
+
}, {}, {
|
|
60
|
+
ref?: import("react").Ref<Carousel> | undefined;
|
|
61
|
+
}>;
|
|
62
|
+
export default CarouselStyled;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Carousel } from 'react-responsive-carousel';
|
|
2
|
+
import 'react-responsive-carousel/lib/styles/carousel.min.css';
|
|
3
|
+
import { styled } from '@mui/material/styles';
|
|
4
|
+
export const CarouselStyled = styled(Carousel, {
|
|
5
|
+
shouldForwardProp: (prop) => !['width', 'height', 'margin', 'color_indicators', 'color_indicator_focus'].includes(prop),
|
|
6
|
+
})(({ width, height, margin, color_indicators, color_indicator_focus }) => ({
|
|
7
|
+
marginTop: margin,
|
|
8
|
+
width: width,
|
|
9
|
+
maxWidth: '100%',
|
|
10
|
+
'& .carousel .slider-wrapper': {
|
|
11
|
+
backgroundColor: '#00000000 !important',
|
|
12
|
+
height: height,
|
|
13
|
+
},
|
|
14
|
+
'& .carousel .control-dots .dot': {
|
|
15
|
+
backgroundColor: color_indicators,
|
|
16
|
+
},
|
|
17
|
+
'& .carousel .control-dots .dot.selected': {
|
|
18
|
+
backgroundColor: color_indicator_focus,
|
|
19
|
+
},
|
|
20
|
+
'& .carousel .slide img': {
|
|
21
|
+
objectFit: 'scale-down',
|
|
22
|
+
},
|
|
23
|
+
'& .carousel .control-arrow': {
|
|
24
|
+
backgroundColor: color_indicators,
|
|
25
|
+
},
|
|
26
|
+
'& .carousel .control-arrow:hover': {
|
|
27
|
+
backgroundColor: color_indicator_focus,
|
|
28
|
+
},
|
|
29
|
+
}));
|
|
30
|
+
export default CarouselStyled;
|
|
31
|
+
//# sourceMappingURL=CarouselStyled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CarouselStyled.js","sourceRoot":"","sources":["../../../src/components/carousel/CarouselStyled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,uDAAuD,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC7C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,kBAAkB,EAAE,uBAAuB,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CACvG,CAAC,CAMC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1E,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,MAAM;IAChB,6BAA6B,EAAE;QAC7B,eAAe,EAAE,sBAAsB;QACvC,MAAM,EAAE,MAAM;KACf;IACD,gCAAgC,EAAE;QAChC,eAAe,EAAE,gBAAgB;KAClC;IACD,yCAAyC,EAAE;QACzC,eAAe,EAAE,qBAAqB;KACvC;IACD,wBAAwB,EAAE;QACxB,SAAS,EAAE,YAAY;KACxB;IACD,4BAA4B,EAAE;QAC5B,eAAe,EAAE,gBAAgB;KAClC;IACD,kCAAkC,EAAE;QAClC,eAAe,EAAE,qBAAqB;KACvC;CACF,CAAC,CAAC,CAAC;AAEJ,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
interface CarrosselProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
cardsCount: number;
|
|
5
|
+
cardWidth: number;
|
|
6
|
+
background_color_button: string;
|
|
7
|
+
background_color_hover_button: string;
|
|
8
|
+
color_button: string;
|
|
9
|
+
color_hover_button: string;
|
|
10
|
+
color_dot_active: string;
|
|
11
|
+
border_radius_button: string;
|
|
12
|
+
texto?: string;
|
|
13
|
+
}
|
|
14
|
+
declare const Carrossel: React.FC<CarrosselProps>;
|
|
15
|
+
export default Carrossel;
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { motion } from 'framer-motion';
|
|
4
|
+
import { ChevronLeft, ChevronRight } from '@mui/icons-material';
|
|
5
|
+
import { styled } from '@mui/material';
|
|
6
|
+
const CarouselWrapper = styled('div')(() => ({
|
|
7
|
+
position: 'relative',
|
|
8
|
+
width: '100%',
|
|
9
|
+
margin: '0 auto',
|
|
10
|
+
overflow: 'hidden',
|
|
11
|
+
'@media (min-width:1921px)': { maxWidth: '1920px' },
|
|
12
|
+
'@media (min-width:1280px) and (max-width:1920px)': { maxWidth: '1200px' },
|
|
13
|
+
'@media (min-width:960px) and (max-width:1279px)': { maxWidth: '940px' },
|
|
14
|
+
'@media (min-width:600px) and (max-width:959px)': { maxWidth: '600px' },
|
|
15
|
+
'@media (max-width:599px)': { maxWidth: '340px' },
|
|
16
|
+
}));
|
|
17
|
+
const CarouselContainer = styled(motion.div)(() => ({
|
|
18
|
+
display: 'flex',
|
|
19
|
+
gap: '24px',
|
|
20
|
+
}));
|
|
21
|
+
const ButtonContainer = styled(motion.div)(() => ({
|
|
22
|
+
display: 'flex',
|
|
23
|
+
width: '100%',
|
|
24
|
+
alignItems: 'center',
|
|
25
|
+
justifyContent: 'flex-end',
|
|
26
|
+
padding: '16px 8px',
|
|
27
|
+
boxSizing: 'border-box',
|
|
28
|
+
}));
|
|
29
|
+
const ButtonStyle = styled('button', {
|
|
30
|
+
shouldForwardProp: (prop) => !['background_color', 'background_color_hover', 'color', 'color_hover', 'border_radius'].includes(prop),
|
|
31
|
+
})(({ background_color, background_color_hover, color, color_hover, border_radius }) => ({
|
|
32
|
+
backgroundColor: background_color,
|
|
33
|
+
color: color,
|
|
34
|
+
border: 'none',
|
|
35
|
+
padding: '8px',
|
|
36
|
+
cursor: 'pointer',
|
|
37
|
+
borderRadius: border_radius,
|
|
38
|
+
transition: 'all 0.3s ease',
|
|
39
|
+
'&:hover': {
|
|
40
|
+
backgroundColor: background_color_hover,
|
|
41
|
+
color: color_hover,
|
|
42
|
+
},
|
|
43
|
+
}));
|
|
44
|
+
const PaginationWrapper = styled('div')(() => ({
|
|
45
|
+
display: 'flex',
|
|
46
|
+
justifyContent: 'center',
|
|
47
|
+
gap: '8px',
|
|
48
|
+
marginTop: '16px',
|
|
49
|
+
}));
|
|
50
|
+
const Dot = styled('button', {
|
|
51
|
+
shouldForwardProp: (prop) => prop !== 'active',
|
|
52
|
+
})(({ active, color }) => ({
|
|
53
|
+
width: '10px',
|
|
54
|
+
height: '10px',
|
|
55
|
+
borderRadius: '50%',
|
|
56
|
+
border: 'none',
|
|
57
|
+
backgroundColor: active ? color : '#ccc',
|
|
58
|
+
transition: 'background-color 0.3s',
|
|
59
|
+
cursor: 'pointer',
|
|
60
|
+
'&:hover': {
|
|
61
|
+
backgroundColor: color,
|
|
62
|
+
},
|
|
63
|
+
}));
|
|
64
|
+
const Carrossel = ({ children, cardsCount, cardWidth, background_color_button, background_color_hover_button, color_button, color_hover_button, color_dot_active, border_radius_button, texto, }) => {
|
|
65
|
+
const wrapperRef = useRef(null);
|
|
66
|
+
const [position, setPosition] = useState(0);
|
|
67
|
+
const [maxOffset, setMaxOffset] = useState(0);
|
|
68
|
+
const [visibleCards, setVisibleCards] = useState(1);
|
|
69
|
+
const [currentPage, setCurrentPage] = useState(0);
|
|
70
|
+
const GAP = 24;
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
const calculateVisibleCards = () => {
|
|
73
|
+
if (wrapperRef.current) {
|
|
74
|
+
const wrapperWidth = wrapperRef.current.offsetWidth;
|
|
75
|
+
const totalCardWidth = (cardWidth + GAP) * cardsCount;
|
|
76
|
+
const maxScroll = wrapperWidth - totalCardWidth;
|
|
77
|
+
const visible = Math.floor(wrapperWidth / (cardWidth + GAP));
|
|
78
|
+
setVisibleCards(visible > 0 ? visible : 1);
|
|
79
|
+
setMaxOffset(maxScroll < 0 ? maxScroll : 0);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
calculateVisibleCards();
|
|
83
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
84
|
+
calculateVisibleCards();
|
|
85
|
+
});
|
|
86
|
+
if (wrapperRef.current) {
|
|
87
|
+
resizeObserver.observe(wrapperRef.current);
|
|
88
|
+
}
|
|
89
|
+
return () => {
|
|
90
|
+
resizeObserver.disconnect();
|
|
91
|
+
};
|
|
92
|
+
}, [cardsCount, cardWidth]);
|
|
93
|
+
const totalPages = Math.ceil(cardsCount / visibleCards);
|
|
94
|
+
const goToPage = (pageIndex) => {
|
|
95
|
+
const newPosition = -((cardWidth + GAP) * visibleCards * pageIndex);
|
|
96
|
+
const clamped = Math.max(newPosition, maxOffset);
|
|
97
|
+
setPosition(clamped);
|
|
98
|
+
setCurrentPage(pageIndex);
|
|
99
|
+
};
|
|
100
|
+
const handlePrev = () => {
|
|
101
|
+
if (currentPage > 0) {
|
|
102
|
+
goToPage(currentPage - 1);
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
const handleNext = () => {
|
|
106
|
+
if (currentPage < totalPages - 1) {
|
|
107
|
+
goToPage(currentPage + 1);
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
return (_jsxs(CarouselWrapper, { ref: wrapperRef, children: [_jsxs(ButtonContainer, { children: [texto && _jsx("span", { style: { flex: 1 }, children: texto }), _jsx(ButtonStyle, { onClick: handlePrev, background_color: background_color_button, background_color_hover: background_color_hover_button, color: color_button, color_hover: color_hover_button, border_radius: border_radius_button, children: _jsx(ChevronLeft, {}) }), _jsx(ButtonStyle, { onClick: handleNext, background_color: background_color_button, background_color_hover: background_color_hover_button, color: color_button, color_hover: color_hover_button, border_radius: border_radius_button, children: _jsx(ChevronRight, {}) })] }), _jsx(CarouselContainer, { animate: { x: position }, transition: { type: 'spring', stiffness: 300, damping: 30 }, drag: "x", dragConstraints: { left: maxOffset, right: 0 }, whileTap: { cursor: 'grabbing' }, children: children }), _jsx(PaginationWrapper, { children: Array.from({ length: totalPages }).map((_, index) => (_jsx(Dot, { color: color_dot_active, active: index === currentPage, onClick: () => goToPage(index) }, index))) })] }));
|
|
111
|
+
};
|
|
112
|
+
export default Carrossel;
|
|
113
|
+
//# sourceMappingURL=Carrossel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Carrossel.js","sourceRoot":"","sources":["../../../src/components/carousel/Carrossel.tsx"],"names":[],"mappings":"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"}
|