@universal-tennis/ui-shared 0.0.16 → 0.0.17
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/stories/assets/icon-chat-blue.svg +10 -0
- package/dist/stories/atoms/Button/Button.d.ts +3 -1
- package/dist/stories/atoms/Button/Button.js.map +1 -1
- package/dist/stories/atoms/Typography/Typography.d.ts +2 -1
- package/dist/stories/atoms/Typography/Typography.js.map +1 -1
- package/dist/stories/molecules/Cards/Cards.stories.js.map +1 -1
- package/dist/stories/molecules/Cards/ContactCard.d.ts +2 -1
- package/dist/stories/molecules/Cards/ContactCard.js +19 -8
- package/dist/stories/molecules/Cards/ContactCard.js.map +1 -1
- package/package.json +3 -1
- package/src/stories/assets/icon-chat-blue.svg +10 -0
- package/src/stories/atoms/Button/Button.tsx +2 -0
- package/src/stories/atoms/Typography/Typography.tsx +1 -0
- package/src/stories/molecules/Cards/Cards.stories.tsx +1 -0
- package/src/stories/molecules/Cards/ContactCard.tsx +26 -10
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
|
|
2
|
+
<defs>
|
|
3
|
+
<path id="0s7v3h5tpa" d="M12 0c6.075 0 11 4.773 11 10.661 0 4.263-2.192 7.456-6.31 9.646l-6.523 3.625c-.084.047-.173.068-.26.068-.274 0-.526-.213-.526-.51v-2.472C3.438 19.61-.613 13.524 1.625 7.014 2.649 4.033 5.095 1.64 8.164.63 9.469.199 10.759 0 12 0zm0 1.015c-1.163 0-2.34.193-3.499.575-2.76.909-4.958 3.056-5.882 5.745-.943 2.743-.707 5.578.664 7.983 1.344 2.358 3.657 4.076 6.346 4.714.47.11.8.518.8.986v1.598l5.74-3.19c3.897-2.074 5.784-4.937 5.784-8.765 0-5.318-4.465-9.646-9.953-9.646zM14.095 13.2c.29 0 .524.224.524.5s-.234.5-.524.5h-6.81c-.288 0-.523-.224-.523-.5s.235-.5.524-.5zm3.143-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5zm0-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5z"/>
|
|
4
|
+
</defs>
|
|
5
|
+
<g fill="none" fill-rule="evenodd">
|
|
6
|
+
<g>
|
|
7
|
+
<use fill="#008DED" xlink:href="#0s7v3h5tpa"/>
|
|
8
|
+
</g>
|
|
9
|
+
</g>
|
|
10
|
+
</svg>
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
2
|
type ButtonProps = {
|
|
3
3
|
children: string | ReactElement;
|
|
4
4
|
category?: string;
|
|
5
|
+
onClick?: VoidFunction;
|
|
6
|
+
style?: React.CSSProperties;
|
|
5
7
|
};
|
|
6
8
|
export default function Button({ children, category, ...props }: ButtonProps): JSX.Element;
|
|
7
9
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAa9C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;IAE/B,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAwB,EAAE,EAAE,CAAC,CAAC;IACxE,eAAe,EAAE,cAAc;IAC/B,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;IAE5C,SAAS,EAAE;QACT,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,sBAAsB;QACvC,WAAW,EAAE,sBAAsB;KACpC;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,EAAE,aAAa;IAC1B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,gBAAgB;IACvB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,CAAC;IAEV,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;IAED,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IAC3D,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,kBAAkB;YACrB,OAAO,CACH,oBAAC,aAAa,kBACZ,UAAU,UACN,KAAK,GAER,QAAQ,CACK,CACnB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACH,oBAAC,UAAU,kBACT,kBAAkB,UACd,KAAK,GAER,QAAQ,CACE,CAChB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
2
|
import "../../assets/css/typography.css";
|
|
3
3
|
type TypographyProps = {
|
|
4
4
|
children: string | ReactElement;
|
|
5
5
|
category?: string;
|
|
6
6
|
size?: string;
|
|
7
|
+
style?: React.CSSProperties;
|
|
7
8
|
};
|
|
8
9
|
export default function Typography({ children, category, size, ...props }: TypographyProps): JSX.Element;
|
|
9
10
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,aAAa,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cards.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/Cards.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Cards.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/Cards.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAelC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,YAAY;AACZ,SAAS,mBAAmB,CAAC,IAAsB;IACjD,OAAO,oBAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;AACnC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAC;AAChC,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,sGAAsG;CACpH,CAAC"}
|
|
@@ -3,6 +3,7 @@ type ContactCardProps = {
|
|
|
3
3
|
name: string;
|
|
4
4
|
phone: string;
|
|
5
5
|
email: string;
|
|
6
|
+
handleOnMessageClick?: VoidFunction;
|
|
6
7
|
};
|
|
7
|
-
export default function ContactCard({ name, phone, email, ...props }: ContactCardProps): JSX.Element;
|
|
8
|
+
export default function ContactCard({ name, phone, email, handleOnMessageClick, ...props }: ContactCardProps): JSX.Element;
|
|
8
9
|
export {};
|
|
@@ -10,19 +10,30 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
|
+
import parsePhoneNumber from 'libphonenumber-js';
|
|
14
|
+
import LocalPhoneOutlinedIcon from '@mui/icons-material/LocalPhoneOutlined';
|
|
15
|
+
import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
|
|
16
|
+
import Link from '@mui/material/Link';
|
|
13
17
|
import Button from '../../atoms/Button/Button';
|
|
14
18
|
import Typography from '../../atoms/Typography/Typography';
|
|
19
|
+
import { ReactComponent as ChatIcon } from '../../assets/icon-chat-blue.svg';
|
|
15
20
|
import { StyledCard } from './shared';
|
|
16
21
|
export default function ContactCard(_a) {
|
|
17
|
-
var { name, phone, email } = _a, props = __rest(_a, ["name", "phone", "email"]);
|
|
22
|
+
var { name, phone, email, handleOnMessageClick } = _a, props = __rest(_a, ["name", "phone", "email", "handleOnMessageClick"]);
|
|
18
23
|
const firstName = name.split(" ")[0];
|
|
24
|
+
const parsedNumber = parsePhoneNumber(phone || '');
|
|
25
|
+
const phoneNumber = parsedNumber === null || parsedNumber === void 0 ? void 0 : parsedNumber.formatInternational();
|
|
19
26
|
return (React.createElement(StyledCard, Object.assign({}, props),
|
|
20
|
-
React.createElement(Typography, { category: "secondary", size: "medium-medium" }, name),
|
|
21
|
-
React.createElement(
|
|
22
|
-
React.createElement(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
React.createElement(Typography, { category: "secondary", size: "x-small-book" },
|
|
27
|
+
React.createElement(Typography, { style: { marginBottom: '8px' }, category: "secondary", size: "medium-medium" }, name),
|
|
28
|
+
phoneNumber && (React.createElement(Link, { sx: { display: 'flex' }, mt: 1, fontSize: 14, href: `tel:${phone}` },
|
|
29
|
+
React.createElement(LocalPhoneOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }),
|
|
30
|
+
React.createElement(Typography, { category: "secondary", size: "x-small-book" }, phoneNumber))),
|
|
31
|
+
email && (React.createElement(Link, { sx: { display: 'flex' }, mt: 1, fontSize: 14, href: `mailto:${email}` },
|
|
32
|
+
React.createElement(EmailOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }),
|
|
33
|
+
React.createElement(Typography, { category: "secondary", size: "x-small-book" }, email))),
|
|
34
|
+
React.createElement(Button, { onClick: handleOnMessageClick, category: "link", style: { marginTop: '8px' } },
|
|
35
|
+
React.createElement(React.Fragment, null,
|
|
36
|
+
React.createElement(ChatIcon, { width: 20 }),
|
|
37
|
+
React.createElement(Typography, { style: { paddingLeft: '8px' }, category: "secondary", size: "x-small-book" }, `Message ${firstName}`)))));
|
|
27
38
|
}
|
|
28
39
|
//# sourceMappingURL=ContactCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/ContactCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ContactCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/ContactCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AACjD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAStC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAEjB;QAFiB,EAClC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,oBAAoB,OACvB,EAD4B,KAAK,cADhB,kDAEnC,CADmD;IAElD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,EAAE,CAAC;IAExD,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,YAAY,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,IAAI,CAAc;QACtG,WAAW,IAAI,CAChB,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE;YACpE,oBAAC,sBAAsB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YAC1D,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CAC1E,CACN;QACA,KAAK,IAAI,CACV,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE;YACrE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YACrD,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAc,CACtE,CACN;QACD,oBAAC,MAAM,IAAC,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC;YAC9E;gBACE,oBAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAI;gBACvB,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAC5E,WAAW,SAAS,EAAE,CACd,CACZ,CACI,CACE,CAChB,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universal-tennis/ui-shared",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.17",
|
|
4
4
|
"main": "dist/items.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://universaltennis.com",
|
|
7
7
|
"dependencies": {
|
|
8
8
|
"@emotion/react": "^11.10.5",
|
|
9
9
|
"@emotion/styled": "^11.10.5",
|
|
10
|
+
"@mui/icons-material": "^5.11.0",
|
|
10
11
|
"@mui/material": "5.5.3",
|
|
11
12
|
"copyfiles": "^2.4.1",
|
|
12
13
|
"cross-env": "^7.0.3",
|
|
14
|
+
"libphonenumber-js": "^1.10.18",
|
|
13
15
|
"react": "^18.2.0",
|
|
14
16
|
"react-dom": "^18.2.0",
|
|
15
17
|
"react-scripts": "5.0.1",
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
|
|
2
|
+
<defs>
|
|
3
|
+
<path id="0s7v3h5tpa" d="M12 0c6.075 0 11 4.773 11 10.661 0 4.263-2.192 7.456-6.31 9.646l-6.523 3.625c-.084.047-.173.068-.26.068-.274 0-.526-.213-.526-.51v-2.472C3.438 19.61-.613 13.524 1.625 7.014 2.649 4.033 5.095 1.64 8.164.63 9.469.199 10.759 0 12 0zm0 1.015c-1.163 0-2.34.193-3.499.575-2.76.909-4.958 3.056-5.882 5.745-.943 2.743-.707 5.578.664 7.983 1.344 2.358 3.657 4.076 6.346 4.714.47.11.8.518.8.986v1.598l5.74-3.19c3.897-2.074 5.784-4.937 5.784-8.765 0-5.318-4.465-9.646-9.953-9.646zM14.095 13.2c.29 0 .524.224.524.5s-.234.5-.524.5h-6.81c-.288 0-.523-.224-.523-.5s.235-.5.524-.5zm3.143-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5zm0-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5z"/>
|
|
4
|
+
</defs>
|
|
5
|
+
<g fill="none" fill-rule="evenodd">
|
|
6
|
+
<g>
|
|
7
|
+
<use fill="#008DED" xlink:href="#0s7v3h5tpa"/>
|
|
8
|
+
</g>
|
|
9
|
+
</g>
|
|
10
|
+
</svg>
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
import parsePhoneNumber from 'libphonenumber-js';
|
|
3
|
+
import LocalPhoneOutlinedIcon from '@mui/icons-material/LocalPhoneOutlined';
|
|
4
|
+
import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
|
|
5
|
+
import Link from '@mui/material/Link';
|
|
3
6
|
import Button from '../../atoms/Button/Button';
|
|
4
7
|
import Typography from '../../atoms/Typography/Typography';
|
|
8
|
+
import { ReactComponent as ChatIcon } from '../../assets/icon-chat-blue.svg';
|
|
5
9
|
|
|
6
10
|
import { StyledCard } from './shared';
|
|
7
11
|
|
|
@@ -9,28 +13,40 @@ type ContactCardProps = {
|
|
|
9
13
|
name: string;
|
|
10
14
|
phone: string;
|
|
11
15
|
email: string;
|
|
16
|
+
handleOnMessageClick?: VoidFunction;
|
|
12
17
|
}
|
|
13
18
|
|
|
14
19
|
export default function ContactCard({
|
|
15
|
-
name, phone, email, ...props
|
|
20
|
+
name, phone, email, handleOnMessageClick, ...props
|
|
16
21
|
}: ContactCardProps) {
|
|
17
22
|
const firstName = name.split(" ")[0];
|
|
23
|
+
const parsedNumber = parsePhoneNumber(phone || '');
|
|
24
|
+
const phoneNumber = parsedNumber?.formatInternational();
|
|
18
25
|
|
|
19
26
|
return (
|
|
20
27
|
<StyledCard
|
|
21
28
|
{...props}
|
|
22
29
|
>
|
|
23
|
-
<Typography category="secondary" size="medium-medium">{name}</Typography>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
30
|
+
<Typography style={{marginBottom: '8px'}} category="secondary" size="medium-medium">{name}</Typography>
|
|
31
|
+
{phoneNumber && (
|
|
32
|
+
<Link sx={{display: 'flex'}} mt={1} fontSize={14} href={`tel:${phone}`}>
|
|
33
|
+
<LocalPhoneOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
|
|
34
|
+
<Typography category="secondary" size="x-small-book">{phoneNumber}</Typography>
|
|
35
|
+
</Link>
|
|
36
|
+
)}
|
|
37
|
+
{email && (
|
|
38
|
+
<Link sx={{display: 'flex'}} mt={1} fontSize={14} href={`mailto:${email}`}>
|
|
39
|
+
<EmailOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
|
|
28
40
|
<Typography category="secondary" size="x-small-book">{email}</Typography>
|
|
29
|
-
</
|
|
30
|
-
|
|
31
|
-
|
|
41
|
+
</Link>
|
|
42
|
+
)}
|
|
43
|
+
<Button onClick={handleOnMessageClick} category="link" style={{marginTop: '8px'}}>
|
|
44
|
+
<>
|
|
45
|
+
<ChatIcon width={20} />
|
|
46
|
+
<Typography style={{paddingLeft: '8px'}} category="secondary" size="x-small-book">
|
|
32
47
|
{`Message ${firstName}`}
|
|
33
48
|
</Typography>
|
|
49
|
+
</>
|
|
34
50
|
</Button>
|
|
35
51
|
</StyledCard>
|
|
36
52
|
);
|