pipesol-button 1.0.0-beta.2 → 1.0.1-beta.11
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/dist/components/CircularIconLink.d.ts +43 -0
- package/dist/components/CircularIconLink.js +35 -0
- package/dist/components/CircularIconLink.js.map +1 -0
- package/dist/components/DownloadButton.d.ts +116 -0
- package/dist/components/DownloadButton.js +80 -0
- package/dist/components/DownloadButton.js.map +1 -0
- package/dist/components/NavigationButton.d.ts +41 -2
- package/dist/components/NavigationButton.js +14 -12
- package/dist/components/NavigationButton.js.map +1 -1
- package/dist/components/NavigationLink.d.ts +16 -0
- package/dist/components/NavigationLink.js +43 -0
- package/dist/components/NavigationLink.js.map +1 -0
- package/dist/components/WhatsAppButton.d.ts +22 -0
- package/dist/components/WhatsAppButton.js +16 -0
- package/dist/components/WhatsAppButton.js.map +1 -1
- package/dist/components/WhatsAppIcon.d.ts +22 -0
- package/dist/components/WhatsAppIcon.js +14 -1
- package/dist/components/WhatsAppIcon.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
|
+
import { SvgIconProps } from '@mui/material';
|
|
3
|
+
/**
|
|
4
|
+
* Propriedades do componente `CircularIconLink`.
|
|
5
|
+
*/
|
|
6
|
+
export interface CircularIconLinkProps {
|
|
7
|
+
/**
|
|
8
|
+
* Ícone do Material UI (`<SvgIcon>`) ou uma imagem (`<img>`).
|
|
9
|
+
* Aceita:
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <Instagram sx={{ color: 'white' }} />
|
|
12
|
+
* // ou
|
|
13
|
+
* <img src="/logo.png" alt="logo" width={24} height={24} />
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
children: ReactElement<HTMLImageElement> | ReactElement<SvgIconProps>;
|
|
17
|
+
/** URL a ser aberta (opcional se onClick for usado) */
|
|
18
|
+
url?: string;
|
|
19
|
+
/** Cor de fundo do círculo */
|
|
20
|
+
background_color: string;
|
|
21
|
+
/** Texto para acessibilidade (`aria-label`) */
|
|
22
|
+
aria_label: string;
|
|
23
|
+
/** Padding interno do círculo. @default "4px" */
|
|
24
|
+
padding?: string;
|
|
25
|
+
/** Estilo da borda. @default "2px solid transparent" */
|
|
26
|
+
border?: string;
|
|
27
|
+
/** Define se o link será aberto em nova aba. @default true */
|
|
28
|
+
openInNewTab?: boolean;
|
|
29
|
+
/** Evento de clique customizado. Se definido, sobrescreve o comportamento padrão */
|
|
30
|
+
onClick?: () => void;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* **CircularIconLink**
|
|
34
|
+
*
|
|
35
|
+
* Componente que exibe um **ícone ou imagem dentro de um círculo clicável**,
|
|
36
|
+
* permitindo criar links visuais para redes sociais, sites ou qualquer URL externa.
|
|
37
|
+
*
|
|
38
|
+
* - Aceita ícones do Material UI (`<SvgIcon>`) ou imagens (`<img>`).
|
|
39
|
+
* - O círculo possui cor de fundo, padding e borda personalizáveis.
|
|
40
|
+
* - Ao clicar, executa o `onClick` se definido, caso contrário abre a `url` em nova aba ou na mesma aba.
|
|
41
|
+
*/
|
|
42
|
+
declare const CircularIconLink: React.FC<CircularIconLinkProps>;
|
|
43
|
+
export default CircularIconLink;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Box, IconButton } from '@mui/material';
|
|
4
|
+
import { styled } from '@mui/material/styles';
|
|
5
|
+
const StyledBox = styled(Box, {
|
|
6
|
+
shouldForwardProp: (prop) => !['background_color', 'padding', 'border'].includes(prop),
|
|
7
|
+
})(({ background_color, padding, border }) => ({
|
|
8
|
+
backgroundColor: background_color,
|
|
9
|
+
padding: padding,
|
|
10
|
+
borderRadius: '50%',
|
|
11
|
+
display: 'inline-block',
|
|
12
|
+
border: border,
|
|
13
|
+
}));
|
|
14
|
+
/**
|
|
15
|
+
* **CircularIconLink**
|
|
16
|
+
*
|
|
17
|
+
* Componente que exibe um **ícone ou imagem dentro de um círculo clicável**,
|
|
18
|
+
* permitindo criar links visuais para redes sociais, sites ou qualquer URL externa.
|
|
19
|
+
*
|
|
20
|
+
* - Aceita ícones do Material UI (`<SvgIcon>`) ou imagens (`<img>`).
|
|
21
|
+
* - O círculo possui cor de fundo, padding e borda personalizáveis.
|
|
22
|
+
* - Ao clicar, executa o `onClick` se definido, caso contrário abre a `url` em nova aba ou na mesma aba.
|
|
23
|
+
*/
|
|
24
|
+
const CircularIconLink = ({ url, background_color = 'transparent', aria_label, padding = '4px', border = 'none', children, openInNewTab = true, onClick, }) => {
|
|
25
|
+
const handleClick = () => {
|
|
26
|
+
if (url) {
|
|
27
|
+
const target = openInNewTab ? '_blank' : '_self';
|
|
28
|
+
const features = openInNewTab ? 'noopener noreferrer' : '';
|
|
29
|
+
window.open(url, target, features);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
return (_jsx(StyledBox, { background_color: background_color, padding: padding, border: border, children: _jsx(IconButton, { "aria-label": aria_label, onClick: onClick || handleClick, children: children }) }));
|
|
33
|
+
};
|
|
34
|
+
export default CircularIconLink;
|
|
35
|
+
//# sourceMappingURL=CircularIconLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CircularIconLink.js","sourceRoot":"","sources":["../../src/components/CircularIconLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,UAAU,EAAgB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CACtE,CAAC,CAIC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7C,eAAe,EAAE,gBAAgB;IACjC,OAAO,EAAE,OAAO;IAChB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,MAAM;CACf,CAAC,CAAC,CAAC;AAuCJ;;;;;;;;;GASG;AACH,MAAM,gBAAgB,GAAoC,CAAC,EACzD,GAAG,EACH,gBAAgB,GAAG,aAAa,EAChC,UAAU,EACV,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,MAAM,EACf,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,OAAO,GACR,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,GAAG,EAAE,CAAC;YACR,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;YACjD,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IAAC,gBAAgB,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YAC7E,KAAC,UAAU,kBAAa,UAAU,EAAE,OAAO,EAAE,OAAO,IAAI,WAAW,YAChE,QAAQ,GACE,GACH,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Interface de propriedades para o componente `DownloadButton`.
|
|
4
|
+
*
|
|
5
|
+
* Use este botão para disponibilizar o download de um arquivo mantendo
|
|
6
|
+
* controle total sobre cores, raio de borda, sombra, dimensões e ícone.
|
|
7
|
+
*
|
|
8
|
+
* As propriedades marcadas com `@default` indicam o valor que será utilizado
|
|
9
|
+
* quando a prop não for fornecida ao componente.
|
|
10
|
+
*/
|
|
11
|
+
export interface DownloadButtonProps {
|
|
12
|
+
/**
|
|
13
|
+
* URL do arquivo a ser baixado.
|
|
14
|
+
*/
|
|
15
|
+
file: string;
|
|
16
|
+
/**
|
|
17
|
+
* Nome do arquivo que será salvo no disco.
|
|
18
|
+
*/
|
|
19
|
+
fileName: string;
|
|
20
|
+
/**
|
|
21
|
+
* Cor de fundo do botão.
|
|
22
|
+
* @default "#1976d2"
|
|
23
|
+
*/
|
|
24
|
+
background?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Cor de fundo exibida no estado hover.
|
|
27
|
+
* @default "#1565c0"
|
|
28
|
+
*/
|
|
29
|
+
backgroundHover?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Cor do texto do botão.
|
|
32
|
+
* @default "#fff"
|
|
33
|
+
*/
|
|
34
|
+
color?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Cor do texto exibida no estado hover.
|
|
37
|
+
* Se não informada, herda a mesma cor definida em `color`.
|
|
38
|
+
*/
|
|
39
|
+
colorHover?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Raio da borda do botão (qualquer valor CSS válido).
|
|
42
|
+
* @default "8px"
|
|
43
|
+
*/
|
|
44
|
+
borderRadius?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Sombra do botão (valor CSS de box-shadow).
|
|
47
|
+
* @default "none"
|
|
48
|
+
*/
|
|
49
|
+
boxShadow?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Ícone opcional exibido à esquerda do conteúdo.
|
|
52
|
+
*/
|
|
53
|
+
icon?: React.ReactNode;
|
|
54
|
+
/**
|
|
55
|
+
* Conteúdo textual do botão (recomendado utilizar `Typography`).
|
|
56
|
+
*/
|
|
57
|
+
children: React.ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* Texto de acessibilidade que descreve a função do botão
|
|
60
|
+
* para leitores de tela (atributo `aria-label`).
|
|
61
|
+
*/
|
|
62
|
+
arialLabel: string;
|
|
63
|
+
/**
|
|
64
|
+
* Largura do botão (valor CSS).
|
|
65
|
+
* @default "auto"
|
|
66
|
+
*/
|
|
67
|
+
width?: string;
|
|
68
|
+
/**
|
|
69
|
+
* Altura do botão (valor CSS).
|
|
70
|
+
* @default "fit-content"
|
|
71
|
+
*/
|
|
72
|
+
height?: string;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Botão de download customizável com suporte a ícone e conteúdo centralizado.
|
|
76
|
+
* O texto deve ser passado via `Typography` como children.
|
|
77
|
+
*
|
|
78
|
+
* ### Parâmetros
|
|
79
|
+
* @param {string} file URL do arquivo a ser baixado.
|
|
80
|
+
* @param {string} fileName Nome do arquivo que será salvo.
|
|
81
|
+
* @param {string} [background="#1976d2"] Cor de fundo padrão do botão. **@default** "#1976d2"
|
|
82
|
+
* @param {string} [backgroundHover="#1565c0"] Cor de fundo no hover. **@default** "#1565c0"
|
|
83
|
+
* @param {string} [color="#fff"] Cor do texto padrão. **@default** "#fff"
|
|
84
|
+
* @param {string} [colorHover] Cor do texto no hover (herda `color` quando ausente).
|
|
85
|
+
* @param {string} [borderRadius="8px"] Raio da borda do botão. **@default** "8px"
|
|
86
|
+
* @param {string} [boxShadow="none"] Sombra do botão. **@default** "none"
|
|
87
|
+
* @param {string} arialLabel Texto de acessibilidade (atributo `aria-label`).
|
|
88
|
+
* @param {React.ReactNode} [icon] Ícone opcional exibido à esquerda do conteúdo.
|
|
89
|
+
* @param {React.ReactNode} children Conteúdo do botão (ex.: `Typography`).
|
|
90
|
+
* @param {string} [width="auto"] Largura do botão (valor CSS). **@default** "auto"
|
|
91
|
+
* @param {string} [height="fit-content"] Altura do botão (valor CSS). **@default** "fit-content"
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* ```tsx
|
|
95
|
+
* import { Typography } from '@mui/material';
|
|
96
|
+
* import { Download as DownloadIcon } from '@mui/icons-material';
|
|
97
|
+
*
|
|
98
|
+
* <DownloadButton
|
|
99
|
+
* file="/docs/manual.pdf"
|
|
100
|
+
* fileName="manual.pdf"
|
|
101
|
+
* arialLabel="Baixar manual do produto"
|
|
102
|
+
* background="#28a745"
|
|
103
|
+
* backgroundHover="#218838"
|
|
104
|
+
* color="#fff"
|
|
105
|
+
* borderRadius="12px"
|
|
106
|
+
* boxShadow="0 2px 8px rgba(0,0,0,0.15)"
|
|
107
|
+
* width="220px"
|
|
108
|
+
* height="44px"
|
|
109
|
+
* icon={<DownloadIcon />}
|
|
110
|
+
* >
|
|
111
|
+
* <Typography variant="button">Baixar Manual</Typography>
|
|
112
|
+
* </DownloadButton>
|
|
113
|
+
* ```
|
|
114
|
+
*/
|
|
115
|
+
declare const DownloadButton: React.FC<DownloadButtonProps>;
|
|
116
|
+
export default DownloadButton;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { styled } from '@mui/material/styles';
|
|
3
|
+
const StyledLink = styled('a', {
|
|
4
|
+
shouldForwardProp: (prop) => ![
|
|
5
|
+
'background',
|
|
6
|
+
'backgroundHover',
|
|
7
|
+
'color',
|
|
8
|
+
'colorHover',
|
|
9
|
+
'borderRadius',
|
|
10
|
+
'boxShadow',
|
|
11
|
+
'width',
|
|
12
|
+
'height'
|
|
13
|
+
].includes(prop),
|
|
14
|
+
})(({ background, backgroundHover, color, colorHover, borderRadius, boxShadow, width, height }) => ({
|
|
15
|
+
width: width,
|
|
16
|
+
height: height,
|
|
17
|
+
display: 'inline-flex',
|
|
18
|
+
alignItems: 'center',
|
|
19
|
+
justifyContent: 'center',
|
|
20
|
+
gap: '8px',
|
|
21
|
+
background: background || '#1976d2',
|
|
22
|
+
color: color || '#fff',
|
|
23
|
+
borderRadius: borderRadius || '8px',
|
|
24
|
+
boxShadow: boxShadow || 'none',
|
|
25
|
+
padding: '8px 16px',
|
|
26
|
+
cursor: 'pointer',
|
|
27
|
+
textDecoration: 'none',
|
|
28
|
+
transition: 'all 0.3s ease',
|
|
29
|
+
'&:hover': {
|
|
30
|
+
background: backgroundHover || '#1565c0',
|
|
31
|
+
color: colorHover || color || '#fff',
|
|
32
|
+
},
|
|
33
|
+
}));
|
|
34
|
+
/**
|
|
35
|
+
* Botão de download customizável com suporte a ícone e conteúdo centralizado.
|
|
36
|
+
* O texto deve ser passado via `Typography` como children.
|
|
37
|
+
*
|
|
38
|
+
* ### Parâmetros
|
|
39
|
+
* @param {string} file URL do arquivo a ser baixado.
|
|
40
|
+
* @param {string} fileName Nome do arquivo que será salvo.
|
|
41
|
+
* @param {string} [background="#1976d2"] Cor de fundo padrão do botão. **@default** "#1976d2"
|
|
42
|
+
* @param {string} [backgroundHover="#1565c0"] Cor de fundo no hover. **@default** "#1565c0"
|
|
43
|
+
* @param {string} [color="#fff"] Cor do texto padrão. **@default** "#fff"
|
|
44
|
+
* @param {string} [colorHover] Cor do texto no hover (herda `color` quando ausente).
|
|
45
|
+
* @param {string} [borderRadius="8px"] Raio da borda do botão. **@default** "8px"
|
|
46
|
+
* @param {string} [boxShadow="none"] Sombra do botão. **@default** "none"
|
|
47
|
+
* @param {string} arialLabel Texto de acessibilidade (atributo `aria-label`).
|
|
48
|
+
* @param {React.ReactNode} [icon] Ícone opcional exibido à esquerda do conteúdo.
|
|
49
|
+
* @param {React.ReactNode} children Conteúdo do botão (ex.: `Typography`).
|
|
50
|
+
* @param {string} [width="auto"] Largura do botão (valor CSS). **@default** "auto"
|
|
51
|
+
* @param {string} [height="fit-content"] Altura do botão (valor CSS). **@default** "fit-content"
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```tsx
|
|
55
|
+
* import { Typography } from '@mui/material';
|
|
56
|
+
* import { Download as DownloadIcon } from '@mui/icons-material';
|
|
57
|
+
*
|
|
58
|
+
* <DownloadButton
|
|
59
|
+
* file="/docs/manual.pdf"
|
|
60
|
+
* fileName="manual.pdf"
|
|
61
|
+
* arialLabel="Baixar manual do produto"
|
|
62
|
+
* background="#28a745"
|
|
63
|
+
* backgroundHover="#218838"
|
|
64
|
+
* color="#fff"
|
|
65
|
+
* borderRadius="12px"
|
|
66
|
+
* boxShadow="0 2px 8px rgba(0,0,0,0.15)"
|
|
67
|
+
* width="220px"
|
|
68
|
+
* height="44px"
|
|
69
|
+
* icon={<DownloadIcon />}
|
|
70
|
+
* >
|
|
71
|
+
* <Typography variant="button">Baixar Manual</Typography>
|
|
72
|
+
* </DownloadButton>
|
|
73
|
+
* ```
|
|
74
|
+
*/
|
|
75
|
+
const DownloadButton = ({ width = 'auto', height = 'fit-content', file, fileName, background, backgroundHover, color, colorHover, borderRadius, boxShadow, arialLabel, icon, children, }) => {
|
|
76
|
+
return (_jsxs(StyledLink, { href: file, download: fileName, background: background, backgroundHover: backgroundHover, color: color, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, "aria-label": arialLabel, width: width, height: height, children: [icon && _jsx("span", { children: icon }), children] }));
|
|
77
|
+
};
|
|
78
|
+
DownloadButton.displayName = 'DownloadButton';
|
|
79
|
+
export default DownloadButton;
|
|
80
|
+
//# sourceMappingURL=DownloadButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DownloadButton.js","sourceRoot":"","sources":["../../src/components/DownloadButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAuF9C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;IAC7B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,YAAY;QACZ,iBAAiB;QACjB,OAAO;QACP,YAAY;QACZ,cAAc;QACd,WAAW;QACX,OAAO;QACP,QAAQ;KACT,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CASC,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAClG,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,GAAG,EAAE,KAAK;IACV,UAAU,EAAE,UAAU,IAAI,SAAS;IACnC,KAAK,EAAE,KAAK,IAAI,MAAM;IACtB,YAAY,EAAE,YAAY,IAAI,KAAK;IACnC,SAAS,EAAE,SAAS,IAAI,MAAM;IAC9B,OAAO,EAAE,UAAU;IACnB,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,eAAe;IAC3B,SAAS,EAAE;QACT,UAAU,EAAE,eAAe,IAAI,SAAS;QACxC,KAAK,EAAE,UAAU,IAAI,KAAK,IAAI,MAAM;KACrC;CACF,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,cAAc,GAAkC,CAAC,EACrD,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,aAAa,EACtB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,EACV,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,gBACR,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,aAEb,IAAI,IAAI,yBAAO,IAAI,GAAQ,EAC3B,QAAQ,IACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,eAAe,cAAc,CAAC"}
|
|
@@ -1,19 +1,58 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Propriedades do componente `NavigationButton`.
|
|
4
|
+
*/
|
|
2
5
|
interface NavigationButtonProps {
|
|
6
|
+
/**
|
|
7
|
+
* URL ou âncora para onde o botão deve navegar.
|
|
8
|
+
* - Se começar com `http`, abre em nova aba.
|
|
9
|
+
* - Caso contrário, é tratado como link interno/âncora.
|
|
10
|
+
*/
|
|
3
11
|
url: string;
|
|
12
|
+
/** Texto para acessibilidade (atributo `aria-label`). */
|
|
4
13
|
aria_label: string;
|
|
14
|
+
/** Cor de fundo padrão do botão (ex: `#1976d2` ou `transparent`). */
|
|
5
15
|
background_color?: string;
|
|
16
|
+
/** Cor de fundo quando o botão é focado/hover. Se não informado, usa a cor padrão. */
|
|
6
17
|
background_color_hover?: string;
|
|
18
|
+
/** Cor do texto padrão (ex: `#fff`). */
|
|
7
19
|
color: string;
|
|
20
|
+
/** Cor do texto no hover. Se não informado, usa a mesma cor padrão. */
|
|
8
21
|
color_hover?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Cor da borda (ex: `#1976d2`).
|
|
24
|
+
* @default "transparent"
|
|
25
|
+
*/
|
|
9
26
|
border_color?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Raio de borda (ex: `8px`, `50%`).
|
|
29
|
+
* @default "0"
|
|
30
|
+
*/
|
|
10
31
|
border_radius?: string;
|
|
32
|
+
/**
|
|
33
|
+
* Sombra CSS (ex: `0 2px 4px rgba(0,0,0,0.2)`).
|
|
34
|
+
* @default "none"
|
|
35
|
+
*/
|
|
11
36
|
box_shadow?: string;
|
|
12
|
-
|
|
13
|
-
layout: 'button' | 'link';
|
|
37
|
+
/** Largura do botão (ex: `200px`, `100%`). */
|
|
14
38
|
width: string;
|
|
39
|
+
/**
|
|
40
|
+
* Margem externa.
|
|
41
|
+
* @default "0"
|
|
42
|
+
*/
|
|
15
43
|
margin?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Padding interno.
|
|
46
|
+
* @default "8px 24px"
|
|
47
|
+
*/
|
|
48
|
+
padding?: string;
|
|
49
|
+
/** Conteúdo interno (texto ou elementos JSX). */
|
|
16
50
|
children: React.ReactNode;
|
|
17
51
|
}
|
|
52
|
+
/**
|
|
53
|
+
* Botão de navegação reutilizável.
|
|
54
|
+
* Cria um link estilizado que pode ser usado para redirecionar
|
|
55
|
+
* para páginas externas ou seções internas.
|
|
56
|
+
*/
|
|
18
57
|
declare const NavigationButton: React.FC<NavigationButtonProps>;
|
|
19
58
|
export default NavigationButton;
|
|
@@ -10,13 +10,12 @@ const ButtonStyled = styled('a', {
|
|
|
10
10
|
'padding',
|
|
11
11
|
'border_radius',
|
|
12
12
|
'border_color',
|
|
13
|
-
'border_color_underline',
|
|
14
13
|
'color_hover',
|
|
15
14
|
'width',
|
|
16
15
|
'margin',
|
|
17
16
|
'boxshadow',
|
|
18
17
|
].includes(prop),
|
|
19
|
-
})(({ background_color, background_color_hover, color, color_hover, padding, border_radius, border_color,
|
|
18
|
+
})(({ background_color, background_color_hover, color, color_hover, padding, border_radius, border_color, width, margin, boxshadow, }) => ({
|
|
20
19
|
width: width,
|
|
21
20
|
cursor: 'pointer',
|
|
22
21
|
textDecoration: 'none',
|
|
@@ -31,24 +30,27 @@ const ButtonStyled = styled('a', {
|
|
|
31
30
|
margin: margin,
|
|
32
31
|
'&:hover': {
|
|
33
32
|
backgroundColor: background_color_hover,
|
|
34
|
-
borderBottom: `1px solid ${border_color_underline}`,
|
|
35
33
|
color: color_hover,
|
|
36
34
|
},
|
|
37
35
|
}));
|
|
38
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Botão de navegação reutilizável.
|
|
38
|
+
* Cria um link estilizado que pode ser usado para redirecionar
|
|
39
|
+
* para páginas externas ou seções internas.
|
|
40
|
+
*/
|
|
41
|
+
const NavigationButton = ({ url, aria_label, background_color, background_color_hover, color, color_hover, border_radius = '0', border_color = 'transparent', box_shadow = 'none', width, margin = '0', padding = '8px 24px', children, }) => {
|
|
39
42
|
const backgroundColor = background_color !== null && background_color !== void 0 ? background_color : 'transparent';
|
|
40
43
|
const backgroundColorHover = background_color_hover !== null && background_color_hover !== void 0 ? background_color_hover : backgroundColor;
|
|
41
44
|
const colorHover = color_hover !== null && color_hover !== void 0 ? color_hover : color;
|
|
42
|
-
const borderRadius = border_radius
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
if (url.indexOf('http') != -1) {
|
|
48
|
-
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: borderColor, border_color_underline: borderColorUnderline, padding: padding, margin: marginButton, "aria-label": aria_label, target: "_blank", boxshadow: box_shadow, rel: "noopener noreferrer", children: children }));
|
|
45
|
+
const borderRadius = border_radius;
|
|
46
|
+
const marginButton = margin;
|
|
47
|
+
if (url.indexOf('http') !== -1) {
|
|
48
|
+
// Link externo: abre em nova aba
|
|
49
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: border_color, padding: padding, margin: marginButton, "aria-label": aria_label, target: "_blank", boxshadow: box_shadow, rel: "noopener noreferrer", children: children }));
|
|
49
50
|
}
|
|
50
51
|
else {
|
|
51
|
-
|
|
52
|
+
// Link interno ou âncora
|
|
53
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: border_color, padding: padding, margin: marginButton, "aria-label": aria_label, boxshadow: box_shadow, children: children }));
|
|
52
54
|
}
|
|
53
55
|
};
|
|
54
56
|
export default NavigationButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationButton.js","sourceRoot":"","sources":["../../src/components/NavigationButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"NavigationButton.js","sourceRoot":"","sources":["../../src/components/NavigationButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface NavigationLinkProps {
|
|
3
|
+
url: string;
|
|
4
|
+
aria_label: string;
|
|
5
|
+
background_color?: string;
|
|
6
|
+
background_color_hover?: string;
|
|
7
|
+
color: string;
|
|
8
|
+
color_hover?: string;
|
|
9
|
+
text_decoration: 'none' | 'underline';
|
|
10
|
+
width: string;
|
|
11
|
+
margin?: string;
|
|
12
|
+
padding?: string;
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}
|
|
15
|
+
declare const NavigationLink: React.FC<NavigationLinkProps>;
|
|
16
|
+
export default NavigationLink;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { styled } from '@mui/material/styles';
|
|
4
|
+
const ButtonStyled = styled('a', {
|
|
5
|
+
shouldForwardProp: (prop) => ![
|
|
6
|
+
'background_color',
|
|
7
|
+
'background_color_hover',
|
|
8
|
+
'color',
|
|
9
|
+
'color_hover',
|
|
10
|
+
'padding',
|
|
11
|
+
'color_hover',
|
|
12
|
+
'width',
|
|
13
|
+
'margin',
|
|
14
|
+
].includes(prop),
|
|
15
|
+
})(({ background_color, background_color_hover, color, color_hover, padding, width, margin, }) => ({
|
|
16
|
+
width: width,
|
|
17
|
+
cursor: 'pointer',
|
|
18
|
+
textDecoration: 'none',
|
|
19
|
+
textTransform: 'none',
|
|
20
|
+
textAlign: 'center',
|
|
21
|
+
backgroundColor: background_color,
|
|
22
|
+
color: color,
|
|
23
|
+
padding: padding,
|
|
24
|
+
margin: margin,
|
|
25
|
+
'&:hover': {
|
|
26
|
+
backgroundColor: background_color_hover,
|
|
27
|
+
borderBottom: `1px solid ${color_hover}`,
|
|
28
|
+
color: color_hover,
|
|
29
|
+
},
|
|
30
|
+
}));
|
|
31
|
+
const NavigationLink = ({ url, aria_label, background_color = 'transparent', background_color_hover, color, color_hover, text_decoration = 'none', width, margin = '0', padding = '0', children }) => {
|
|
32
|
+
const backgroundColor = background_color;
|
|
33
|
+
const backgroundColorHover = background_color_hover !== null && background_color_hover !== void 0 ? background_color_hover : backgroundColor;
|
|
34
|
+
const colorHover = color_hover !== null && color_hover !== void 0 ? color_hover : color;
|
|
35
|
+
if (url.indexOf('http') != -1) {
|
|
36
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, padding: padding, margin: margin, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", children: children }));
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, padding: padding, margin: margin, "aria-label": aria_label, children: children }));
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
export default NavigationLink;
|
|
43
|
+
//# sourceMappingURL=NavigationLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationLink.js","sourceRoot":"","sources":["../../src/components/NavigationLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,EAAE;IAC/B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,kBAAkB;QAClB,wBAAwB;QACxB,OAAO;QACP,aAAa;QACb,SAAS;QACT,aAAa;QACb,OAAO;QACP,QAAQ;KACT,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CAQC,CAAC,EACF,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE,EAAE,CAAC,CAAC;IACL,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,MAAM;IACtB,aAAa,EAAE,MAAM;IACrB,SAAS,EAAE,QAAQ;IACnB,eAAe,EAAE,gBAAgB;IACjC,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,MAAM;IAEd,SAAS,EAAE;QACT,eAAe,EAAE,sBAAsB;QACvC,YAAY,EAAE,aAAa,WAAW,EAAE;QACxC,KAAK,EAAE,WAAW;KACnB;CACF,CAAC,CAAC,CAAC;AAgBJ,MAAM,cAAc,GAAkC,CAAC,EACrD,GAAG,EAAE,UAAU,EAAE,gBAAgB,GAAC,aAAa,EAAE,sBAAsB,EACvE,KAAK,EAAE,WAAW,EAAE,eAAe,GAAG,MAAM,EAC5C,KAAK,EAAE,MAAM,GAAC,GAAG,EAAE,OAAO,GAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IAE5C,MAAM,eAAe,GAAY,gBAAgB,CAAC;IAClD,MAAM,oBAAoB,GAAY,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,eAAe,CAAC;IAChF,MAAM,UAAU,GAAY,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,CAAC;IAEjD,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;QAE9B,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,eAAe,EACjC,sBAAsB,EAAE,oBAAoB,EAC5C,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACD,UAAU,EACvB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YACxB,QAAQ,GACI,CAChB,CAAC;IACJ,CAAC;SACG,CAAC;QAEH,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,eAAe,EACjC,sBAAsB,EAAE,oBAAoB,EAC5C,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,EACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACD,UAAU,YAEtB,QAAQ,GACI,CAChB,CAAC;IACJ,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Propriedades do componente `WhatsAppButton`.
|
|
4
|
+
*/
|
|
2
5
|
interface WhatsAppButtonProps {
|
|
6
|
+
/**
|
|
7
|
+
* Número de telefone para iniciar a conversa no WhatsApp.
|
|
8
|
+
*
|
|
9
|
+
* - Deve ser informado **apenas com dígitos**, incluindo o código do país.
|
|
10
|
+
* - Exemplo para Brasil: `"5511999999999"` (55 = DDI, 11 = DDD).
|
|
11
|
+
*/
|
|
3
12
|
whatsapp: string;
|
|
4
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* Botão flutuante do WhatsApp que abre uma conversa no **WhatsApp** em uma nova aba,
|
|
16
|
+
* usando o número fornecido na propriedade `whatsapp`.
|
|
17
|
+
*
|
|
18
|
+
* - Fica posicionado no canto inferior direito da tela.
|
|
19
|
+
* - Estilizado com a cor oficial do WhatsApp (#25D366).
|
|
20
|
+
* - Ao clicar, redireciona para `https://wa.me/{whatsapp}`
|
|
21
|
+
*
|
|
22
|
+
* Exemplo de uso:
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <WhatsAppButton whatsapp="5511999999999" />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
5
27
|
declare const WhatsAppButton: React.FC<WhatsAppButtonProps>;
|
|
6
28
|
export default WhatsAppButton;
|
|
@@ -14,7 +14,23 @@ const StyledFab = styled(Fab)({
|
|
|
14
14
|
backgroundColor: '#1EBE5D',
|
|
15
15
|
},
|
|
16
16
|
});
|
|
17
|
+
/**
|
|
18
|
+
* Botão flutuante do WhatsApp que abre uma conversa no **WhatsApp** em uma nova aba,
|
|
19
|
+
* usando o número fornecido na propriedade `whatsapp`.
|
|
20
|
+
*
|
|
21
|
+
* - Fica posicionado no canto inferior direito da tela.
|
|
22
|
+
* - Estilizado com a cor oficial do WhatsApp (#25D366).
|
|
23
|
+
* - Ao clicar, redireciona para `https://wa.me/{whatsapp}`
|
|
24
|
+
*
|
|
25
|
+
* Exemplo de uso:
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <WhatsAppButton whatsapp="5511999999999" />
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
17
30
|
const WhatsAppButton = ({ whatsapp }) => {
|
|
31
|
+
/**
|
|
32
|
+
* Abre uma nova aba com o link oficial `wa.me/{whatsapp}` para iniciar a conversa.
|
|
33
|
+
*/
|
|
18
34
|
const handleClick = () => {
|
|
19
35
|
window.open(`https://wa.me/${whatsapp}`, '_blank');
|
|
20
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsAppButton.js","sourceRoot":"","sources":["../../src/components/WhatsAppButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5B,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,IAAI;IACZ,eAAe,EAAE,SAAS;IAC1B,KAAK,EAAE,OAAO;IAEd,SAAS,EAAE;QACT,eAAe,EAAE,SAAS;KAC3B;CACF,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"WhatsAppButton.js","sourceRoot":"","sources":["../../src/components/WhatsAppButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5B,QAAQ,EAAE,OAAO;IACjB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,IAAI;IACZ,eAAe,EAAE,SAAS;IAC1B,KAAK,EAAE,OAAO;IAEd,SAAS,EAAE;QACT,eAAe,EAAE,SAAS;KAC3B;CACF,CAAC,CAAC;AAeH;;;;;;;;;;;;GAYG;AACH,MAAM,cAAc,GAAkC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrE;;OAEG;IACH,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,iBAAiB,QAAQ,EAAE,EAAE,QAAQ,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,kBAAY,iBAAiB,EAAC,OAAO,EAAE,WAAW,YAC1D,KAAC,QAAQ,KAAG,GACF,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Propriedades do componente `WhatsAppIcon`.
|
|
4
|
+
*/
|
|
2
5
|
export interface WhatsAppIconProps {
|
|
6
|
+
/**
|
|
7
|
+
* Número de telefone para iniciar a conversa no WhatsApp.
|
|
8
|
+
*
|
|
9
|
+
* - Use **apenas dígitos**, incluindo o código do país.
|
|
10
|
+
* - Exemplo (Brasil): `"5511999999999"` (55 = DDI, 11 = DDD).
|
|
11
|
+
*/
|
|
3
12
|
whatsapp: string;
|
|
4
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* Ícone clicável do WhatsApp envolto em um container circular personalizável,
|
|
16
|
+
* que pode ser posicionado livremente em qualquer lugar da tela.
|
|
17
|
+
*
|
|
18
|
+
* - Ao clicar, abre uma nova aba com o link `https://wa.me/{whatsapp}`.
|
|
19
|
+
* - A cor de fundo do círculo é a cor oficial do WhatsApp (`#25D366`).
|
|
20
|
+
* - Ideal para ser usado dentro de layouts onde você controla o `position` via CSS/Box pai.
|
|
21
|
+
*
|
|
22
|
+
* Exemplo de uso:
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <WhatsAppIcon whatsapp="5511999999999" />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
5
27
|
declare const WhatsAppIcon: React.FC<WhatsAppIconProps>;
|
|
6
28
|
export default WhatsAppIcon;
|
|
@@ -11,8 +11,21 @@ const StyledBox = styled(Box, {
|
|
|
11
11
|
display: 'inline-block',
|
|
12
12
|
border: '2px solid transparent',
|
|
13
13
|
}));
|
|
14
|
+
/**
|
|
15
|
+
* Ícone clicável do WhatsApp envolto em um container circular personalizável,
|
|
16
|
+
* que pode ser posicionado livremente em qualquer lugar da tela.
|
|
17
|
+
*
|
|
18
|
+
* - Ao clicar, abre uma nova aba com o link `https://wa.me/{whatsapp}`.
|
|
19
|
+
* - A cor de fundo do círculo é a cor oficial do WhatsApp (`#25D366`).
|
|
20
|
+
* - Ideal para ser usado dentro de layouts onde você controla o `position` via CSS/Box pai.
|
|
21
|
+
*
|
|
22
|
+
* Exemplo de uso:
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <WhatsAppIcon whatsapp="5511999999999" />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
14
27
|
const WhatsAppIcon = ({ whatsapp }) => {
|
|
15
|
-
return (_jsx(StyledBox, { background_color:
|
|
28
|
+
return (_jsx(StyledBox, { background_color: "#25D366", children: _jsx(IconButton, { "aria-label": "icone whatsapp", onClick: () => window.open(`https://wa.me/${whatsapp}`, '_blank', 'noopener noreferrer'), children: _jsx(WhatsApp, { sx: { color: 'white', fontSize: 24 } }) }) }));
|
|
16
29
|
};
|
|
17
30
|
export default WhatsAppIcon;
|
|
18
31
|
//# sourceMappingURL=WhatsAppIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsAppIcon.js","sourceRoot":"","sources":["../../src/components/WhatsAppIcon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC5E,CAAC,CAA+B,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,eAAe,EAAE,gBAAgB;IACjC,OAAO,EAAE,KAAK;IACd,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,uBAAuB;CAChC,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"WhatsAppIcon.js","sourceRoot":"","sources":["../../src/components/WhatsAppIcon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC5E,CAAC,CAA+B,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,eAAe,EAAE,gBAAgB;IACjC,OAAO,EAAE,KAAK;IACd,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,uBAAuB;CAChC,CAAC,CAAC,CAAC;AAeJ;;;;;;;;;;;;GAYG;AACH,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjE,OAAO,CACL,KAAC,SAAS,IAAC,gBAAgB,EAAC,SAAS,YACnC,KAAC,UAAU,kBACE,gBAAgB,EAC3B,OAAO,EAAE,GAAG,EAAE,CACZ,MAAM,CAAC,IAAI,CAAC,iBAAiB,QAAQ,EAAE,EAAE,QAAQ,EAAE,qBAAqB,CAAC,YAG3E,KAAC,QAAQ,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAI,GACvC,GACH,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
export { default as CircularIconLink } from './components/CircularIconLink';
|
|
1
2
|
export { default as NavigationButton } from './components/NavigationButton';
|
|
2
|
-
export { default as
|
|
3
|
+
export { default as DownloadButton } from './components/DownloadButton';
|
|
4
|
+
export { default as NavigationLink } from './components/NavigationLink';
|
|
3
5
|
export { default as ScrollToTopButton } from './components/ScrollToTopButton';
|
|
4
6
|
export { default as WhatsAppButton } from './components/WhatsAppButton';
|
|
5
7
|
export { default as WhatsAppIcon } from './components/WhatsAppIcon';
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
export { default as CircularIconLink } from './components/CircularIconLink';
|
|
1
2
|
export { default as NavigationButton } from './components/NavigationButton';
|
|
2
|
-
export { default as
|
|
3
|
+
export { default as DownloadButton } from './components/DownloadButton';
|
|
4
|
+
export { default as NavigationLink } from './components/NavigationLink';
|
|
3
5
|
export { default as ScrollToTopButton } from './components/ScrollToTopButton';
|
|
4
6
|
export { default as WhatsAppButton } from './components/WhatsAppButton';
|
|
5
7
|
export { default as WhatsAppIcon } from './components/WhatsAppIcon';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAC,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAC,MAAM,2BAA2B,CAAC"}
|