@appcorp/kismaa-web-ui 0.1.28 → 0.1.30
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/index.d.ts +1 -0
- package/index.js +1 -0
- package/organisms/attribute-card/attribute-card.d.ts +2 -2
- package/organisms/attribute-card/attribute-card.js +2 -2
- package/organisms/attribute-card/props.js +1 -1
- package/organisms/attribute-card/type.d.ts +1 -1
- package/organisms/attributes-section/attributes-section.js +6 -3
- package/organisms/attributes-section/props.d.ts +2 -2
- package/organisms/attributes-section/props.js +5 -10
- package/organisms/attributes-section/type.d.ts +1 -2
- package/organisms/extended-user-card/extended-user-card.js +8 -8
- package/organisms/user-details/props.js +2 -3
- package/organisms/user-details/type.d.ts +2 -3
- package/organisms/user-details/user-details.js +7 -7
- package/organisms/users-list-explore/users-list-explore.d.ts +2 -2
- package/package.json +1 -1
- package/templates/user-detail-page/props.js +2 -2
- package/templates/user-detail-page/type.d.ts +2 -2
- package/templates/user-detail-page/user-detail-page.js +3 -3
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { AttributeCardProps } from './type';
|
|
3
|
-
export declare const AttributeCard:
|
|
3
|
+
export declare const AttributeCard: FC<AttributeCardProps>;
|
|
@@ -7,11 +7,11 @@ exports.AttributeCard = void 0;
|
|
|
7
7
|
var molecules_1 = require("../../molecules");
|
|
8
8
|
var react_1 = __importDefault(require("react"));
|
|
9
9
|
var AttributeCard = function (_a) {
|
|
10
|
-
var title = _a.title,
|
|
10
|
+
var title = _a.title, items = _a.items;
|
|
11
11
|
return (react_1.default.createElement("div", { className: "flex flex-col items-stretch gap-1 rounded-xl border-[1px] border-blue-300/90 bg-purple-200/90" },
|
|
12
12
|
react_1.default.createElement("div", { className: "mx-5 my-4" },
|
|
13
13
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H3 }, title)),
|
|
14
14
|
react_1.default.createElement("div", { className: "h-full scale-[1.01] rounded-xl border-[1px] border-purple-400 bg-white px-12 py-5" },
|
|
15
|
-
react_1.default.createElement("ul", { className: "list-disc leading-[26px] text-gray-500" },
|
|
15
|
+
react_1.default.createElement("ul", { className: "list-disc leading-[26px] text-gray-500" }, items.map(function (item) { return (react_1.default.createElement("li", { key: item }, item)); })))));
|
|
16
16
|
};
|
|
17
17
|
exports.AttributeCard = AttributeCard;
|
|
@@ -8,9 +8,12 @@ var molecules_1 = require("../../molecules");
|
|
|
8
8
|
var react_1 = __importDefault(require("react"));
|
|
9
9
|
var attribute_card_1 = require("../attribute-card");
|
|
10
10
|
var AttributeSection = function (_a) {
|
|
11
|
-
var
|
|
11
|
+
var attributesData = _a.attributesData;
|
|
12
12
|
return (react_1.default.createElement("div", { className: "text-gray-800" },
|
|
13
|
-
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H2 },
|
|
14
|
-
react_1.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2" }, attributesData.map(function (
|
|
13
|
+
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H2 }, "My Attributes"),
|
|
14
|
+
react_1.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2" }, attributesData.map(function (_a) {
|
|
15
|
+
var title = _a.title, items = _a.items;
|
|
16
|
+
return (react_1.default.createElement(attribute_card_1.AttributeCard, { key: title, title: title, items: items }));
|
|
17
|
+
}))));
|
|
15
18
|
};
|
|
16
19
|
exports.AttributeSection = AttributeSection;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export declare const attributesData: {
|
|
2
2
|
title: string;
|
|
3
|
-
|
|
3
|
+
items: string[];
|
|
4
4
|
}[];
|
|
5
5
|
export declare const attributeSectionData: {
|
|
6
6
|
sectionHeading: string;
|
|
7
7
|
attributesData: {
|
|
8
8
|
title: string;
|
|
9
|
-
|
|
9
|
+
items: string[];
|
|
10
10
|
}[];
|
|
11
11
|
};
|
|
@@ -4,7 +4,7 @@ exports.attributeSectionData = exports.attributesData = void 0;
|
|
|
4
4
|
exports.attributesData = [
|
|
5
5
|
{
|
|
6
6
|
title: 'Specialties',
|
|
7
|
-
|
|
7
|
+
items: [
|
|
8
8
|
'Career & Work',
|
|
9
9
|
'Spirit Guides',
|
|
10
10
|
'Deceased Loved Ones',
|
|
@@ -14,16 +14,11 @@ exports.attributesData = [
|
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
16
|
title: 'Skills',
|
|
17
|
-
|
|
18
|
-
'Clairvoyant',
|
|
19
|
-
'Medium',
|
|
20
|
-
'Angel Readings',
|
|
21
|
-
'Dream Exploration',
|
|
22
|
-
],
|
|
17
|
+
items: ['Clairvoyant', 'Medium', 'Angel Readings', 'Dream Exploration'],
|
|
23
18
|
},
|
|
24
|
-
{ title: 'Communication',
|
|
25
|
-
{ title: 'Language',
|
|
26
|
-
{ title: 'Tools',
|
|
19
|
+
{ title: 'Communication', items: ['Inspirational'] },
|
|
20
|
+
{ title: 'Language', items: ['English'] },
|
|
21
|
+
{ title: 'Tools', items: ['Tarot'] },
|
|
27
22
|
];
|
|
28
23
|
exports.attributeSectionData = {
|
|
29
24
|
sectionHeading: 'Attribute',
|
|
@@ -17,47 +17,47 @@ var ExtendedUserCard = function (_a) {
|
|
|
17
17
|
react_1.default.createElement("div", { className: "absolute right-3 top-3 z-10" },
|
|
18
18
|
react_1.default.createElement(active_icon_1.ActiveIcon, { onlineStatus: onlineStatus })),
|
|
19
19
|
react_1.default.createElement("div", { className: "h-72 w-full overflow-hidden rounded-xl" },
|
|
20
|
-
react_1.default.createElement(image_1.default, {
|
|
20
|
+
react_1.default.createElement(image_1.default, { alt: title, className: "h-full w-full object-cover object-center", fill: true, height: 0, src: imageUrl, width: 0, sizes: "20vw" }))),
|
|
21
21
|
react_1.default.createElement("div", { className: "mx-4 my-7 lg:mx-5 lg:my-6" },
|
|
22
22
|
react_1.default.createElement("div", { className: "mb-5 text-primary" },
|
|
23
23
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.H4 }, title)),
|
|
24
24
|
react_1.default.createElement(horizontal_divider_1.HorizontalDivider, null),
|
|
25
25
|
react_1.default.createElement("div", { className: "my-3 flex w-full items-center" },
|
|
26
|
-
react_1.default.createElement("div", { className: "w-[50%] text-
|
|
26
|
+
react_1.default.createElement("div", { className: "w-[50%] text-gray-400" },
|
|
27
27
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P2 }, "Fee")),
|
|
28
28
|
react_1.default.createElement("div", { className: "w-[50%]" },
|
|
29
29
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.SUBH3 }, fee))),
|
|
30
30
|
react_1.default.createElement(horizontal_divider_1.HorizontalDivider, null),
|
|
31
31
|
react_1.default.createElement("div", { className: "my-3 flex w-full items-center" },
|
|
32
|
-
react_1.default.createElement("div", { className: "w-[50%] text-
|
|
32
|
+
react_1.default.createElement("div", { className: "w-[50%] text-gray-400" },
|
|
33
33
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P2 }, "Avg. Rating")),
|
|
34
34
|
react_1.default.createElement("div", { className: "flex w-[50%] items-center gap-1" },
|
|
35
35
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.SUBH3 }, avgRating),
|
|
36
36
|
react_1.default.createElement(molecules_1.Ratings, { rating: avgRating, renderFraction: false, starsSize: "w-4 lg:w-[15%]" }))),
|
|
37
37
|
react_1.default.createElement(horizontal_divider_1.HorizontalDivider, null),
|
|
38
38
|
react_1.default.createElement("div", { className: "my-3 flex w-full items-center" },
|
|
39
|
-
react_1.default.createElement("div", { className: "w-[50%] text-
|
|
39
|
+
react_1.default.createElement("div", { className: "w-[50%] text-gray-400" },
|
|
40
40
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P2 }, "Total Rating")),
|
|
41
41
|
react_1.default.createElement("div", { className: "w-[50%]" },
|
|
42
42
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.SUBH3 }, totalRating))),
|
|
43
43
|
react_1.default.createElement(horizontal_divider_1.HorizontalDivider, null),
|
|
44
44
|
react_1.default.createElement("div", { className: "my-3 flex w-full items-center" },
|
|
45
|
-
react_1.default.createElement("div", { className: "w-[50%] text-
|
|
45
|
+
react_1.default.createElement("div", { className: "w-[50%] text-gray-400" },
|
|
46
46
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P2 }, "Total Chat")),
|
|
47
47
|
react_1.default.createElement("div", { className: "w-[50%]" },
|
|
48
48
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.SUBH3 }, totalChat))),
|
|
49
49
|
react_1.default.createElement(horizontal_divider_1.HorizontalDivider, null),
|
|
50
50
|
react_1.default.createElement("div", { className: "my-3 flex w-full items-center" },
|
|
51
|
-
react_1.default.createElement("div", { className: "w-[50%] text-
|
|
51
|
+
react_1.default.createElement("div", { className: "w-[50%] text-gray-400" },
|
|
52
52
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P2 }, "Expert in")),
|
|
53
53
|
react_1.default.createElement("div", { className: "w-[50%]" },
|
|
54
54
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.SUBH3 }, expertIn))),
|
|
55
55
|
react_1.default.createElement(horizontal_divider_1.HorizontalDivider, null),
|
|
56
56
|
react_1.default.createElement("div", { className: "my-3 flex w-full" },
|
|
57
|
-
react_1.default.createElement("div", { className: "w-[50%] text-
|
|
57
|
+
react_1.default.createElement("div", { className: "w-[50%] text-gray-400" },
|
|
58
58
|
react_1.default.createElement(molecules_1.Typography, { variant: molecules_1.TYPOGRAPHY_VARIANTS.P2 }, "Other expertise")),
|
|
59
59
|
react_1.default.createElement("div", { className: "flex w-[50%] flex-col gap-2" }, otherExpertise.map(function (expertise) { return (react_1.default.createElement(molecules_1.Badge, { key: expertise.label, label: expertise.label, type: type_1.BADGE_TYPE.CARD_BADGE })); }))),
|
|
60
60
|
react_1.default.createElement("div", { className: "mt-7 w-full" },
|
|
61
|
-
react_1.default.createElement(molecules_1.Button, { label:
|
|
61
|
+
react_1.default.createElement(molecules_1.Button, { label: "Chat Now", size: molecules_1.BUTTON_SIZES.MD, type: molecules_1.BUTTON_TYPES.PRIMARY, handleOnClick: onChatClick })))));
|
|
62
62
|
};
|
|
63
63
|
exports.ExtendedUserCard = ExtendedUserCard;
|
|
@@ -8,12 +8,11 @@ exports.userDetailsData = {
|
|
|
8
8
|
userName: 'TRUE HEALER',
|
|
9
9
|
bannerImageSrc: '/user-detail-banner.png',
|
|
10
10
|
aboutTitle: 'About Me',
|
|
11
|
-
aboutImageSrc: '/card-person.jpg',
|
|
12
11
|
description: 'My clairsentient abilities enable me to receive psychic insights by sensing subtle energies and interpreting images from my angels. Starting as a teenager, I discovered my unique gift of consistently seeing a persons soul, always radiating unconditional love, irrespective of their actions. Guided by my angels, Ive honed this ability over 42 years of continuous learning. My extensive practice has allowed me to develop a range of skills, including clairaudience, clairvoyance, empathic abilities, autowriting, energy reading, and Tarot. Remote psychic readings are facilitated by tapping into your energy field, providing accurate insights for both you and those close to you.',
|
|
13
12
|
attributesData: props_1.attributesData,
|
|
14
|
-
attributeHeading: 'My Attributes',
|
|
15
13
|
onlineStatus: kismaa_utils_1.PSYCHIC_ONLINE_STATUS.ONLINE,
|
|
16
|
-
|
|
14
|
+
profileImageSrc: '/card-person.jpg',
|
|
15
|
+
profileImageAlt: '',
|
|
17
16
|
title: 'TRUE HEALER',
|
|
18
17
|
totalChat: 0,
|
|
19
18
|
totalRating: 0,
|
|
@@ -3,9 +3,7 @@ import { BreadcrumbsProps } from '../../molecules/breadcrumbs';
|
|
|
3
3
|
import { AttributeItem } from '../attributes-section';
|
|
4
4
|
import { Expertise } from '../extended-user-card';
|
|
5
5
|
export interface UserDetailsProps {
|
|
6
|
-
aboutImageSrc: string;
|
|
7
6
|
aboutTitle: string;
|
|
8
|
-
attributeHeading: string;
|
|
9
7
|
attributesData: AttributeItem[];
|
|
10
8
|
avgRating: number;
|
|
11
9
|
bannerImageSrc: string;
|
|
@@ -17,7 +15,8 @@ export interface UserDetailsProps {
|
|
|
17
15
|
onChatClick: () => void;
|
|
18
16
|
onlineStatus: PSYCHIC_ONLINE_STATUS;
|
|
19
17
|
otherExpertise: Expertise[];
|
|
20
|
-
|
|
18
|
+
profileImageSrc: string;
|
|
19
|
+
profileImageAlt: string;
|
|
21
20
|
title: string;
|
|
22
21
|
totalChat: number;
|
|
23
22
|
totalRating: number;
|
|
@@ -11,24 +11,24 @@ var extended_user_card_1 = require("../extended-user-card");
|
|
|
11
11
|
var attributes_section_1 = require("../attributes-section");
|
|
12
12
|
var section_header_1 = require("../section-header");
|
|
13
13
|
var UserDetails = function (_a) {
|
|
14
|
-
var
|
|
14
|
+
var aboutTitle = _a.aboutTitle, attributesData = _a.attributesData, avgRating = _a.avgRating, bannerImageSrc = _a.bannerImageSrc, breadcrumbs = _a.breadcrumbs, description = _a.description, expertIn = _a.expertIn, fee = _a.fee, heading = _a.heading, onChatClick = _a.onChatClick, onlineStatus = _a.onlineStatus, otherExpertise = _a.otherExpertise, profileImageSrc = _a.profileImageSrc, title = _a.title, totalChat = _a.totalChat, totalRating = _a.totalRating, userName = _a.userName;
|
|
15
15
|
return (react_1.default.createElement("section", { className: "kismaa-section-spacing bg-white" },
|
|
16
16
|
react_1.default.createElement("div", { className: "kismaa-container" },
|
|
17
17
|
react_1.default.createElement(section_header_1.SectionHeader, { heading: heading, subheading: "", renderCtaButton: false, handleButtonClick: function () { return null; }, breadcrumbs: breadcrumbs }),
|
|
18
18
|
react_1.default.createElement("div", { className: "grid w-full gap-6 xl:grid-cols-12 xl:gap-24" },
|
|
19
19
|
react_1.default.createElement("div", { className: "block w-full md:hidden lg:hidden xl:hidden" },
|
|
20
|
-
react_1.default.createElement(extended_user_card_1.ExtendedUserCard, { avgRating: avgRating, expertIn: expertIn, fee: fee, imageUrl:
|
|
20
|
+
react_1.default.createElement(extended_user_card_1.ExtendedUserCard, { avgRating: avgRating, expertIn: expertIn, fee: fee, imageUrl: profileImageSrc, onChatClick: onChatClick, onlineStatus: onlineStatus, otherExpertise: otherExpertise, title: title, totalChat: totalChat, totalRating: totalRating })),
|
|
21
21
|
react_1.default.createElement("div", { className: "w-full lg:col-span-7 xl:col-span-8" },
|
|
22
22
|
react_1.default.createElement("div", { className: "mt-4 lg:mt-9" },
|
|
23
23
|
react_1.default.createElement(user_detail_banner_1.UserDetailBanner, { userName: userName, bannerImageSrc: bannerImageSrc })),
|
|
24
24
|
react_1.default.createElement("div", { className: "mt-4 lg:mt-9" },
|
|
25
|
-
react_1.default.createElement(about_user_1.AboutUser, { title: aboutTitle, imageSrc:
|
|
26
|
-
react_1.default.createElement("div", { className: "mt-6 grid gap-10 lg:mt-
|
|
25
|
+
react_1.default.createElement(about_user_1.AboutUser, { title: aboutTitle, imageSrc: profileImageSrc, description: description })),
|
|
26
|
+
react_1.default.createElement("div", { className: "mt-6 grid gap-10 lg:mt-16 lg:grid-cols-12 lg:gap-20" },
|
|
27
27
|
react_1.default.createElement("div", { className: "lg:col-span-7 xl:col-span-9" },
|
|
28
|
-
react_1.default.createElement(attributes_section_1.AttributeSection, { attributesData: attributesData
|
|
28
|
+
react_1.default.createElement(attributes_section_1.AttributeSection, { attributesData: attributesData })),
|
|
29
29
|
react_1.default.createElement("div", { className: "hidden w-full md:block lg:col-span-5 xl:hidden" },
|
|
30
|
-
react_1.default.createElement(extended_user_card_1.ExtendedUserCard, { onlineStatus: onlineStatus, imageUrl:
|
|
30
|
+
react_1.default.createElement(extended_user_card_1.ExtendedUserCard, { onlineStatus: onlineStatus, imageUrl: profileImageSrc, onChatClick: onChatClick, otherExpertise: otherExpertise, fee: fee, title: title, avgRating: avgRating, totalRating: totalRating, totalChat: totalChat, expertIn: expertIn })))),
|
|
31
31
|
react_1.default.createElement("div", { className: "hidden w-full lg:col-span-4 lg:hidden xl:block" },
|
|
32
|
-
react_1.default.createElement(extended_user_card_1.ExtendedUserCard, { onlineStatus: onlineStatus, imageUrl:
|
|
32
|
+
react_1.default.createElement(extended_user_card_1.ExtendedUserCard, { onlineStatus: onlineStatus, imageUrl: profileImageSrc, onChatClick: onChatClick, otherExpertise: otherExpertise, fee: fee, title: title, avgRating: avgRating, totalRating: totalRating, totalChat: totalChat, expertIn: expertIn }))))));
|
|
33
33
|
};
|
|
34
34
|
exports.UserDetails = UserDetails;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { UsersListExploreProps } from './type';
|
|
3
|
-
export declare const UsersListExplore:
|
|
3
|
+
export declare const UsersListExplore: FC<UsersListExploreProps>;
|
package/package.json
CHANGED
|
@@ -24,9 +24,9 @@ var props_8 = require("../../organisms/user-details/props");
|
|
|
24
24
|
exports.userDetailPageData = {
|
|
25
25
|
navbar: __assign({}, props_7.navbarData),
|
|
26
26
|
banner: __assign(__assign({}, props_3.bannerData), { type: organisms_1.BANNER_TYPES.HEADER }),
|
|
27
|
-
|
|
27
|
+
ctaBanner: __assign({}, props_5.ctaBannerData),
|
|
28
28
|
getAppBanner: __assign({}, props_1.getAppBannerData),
|
|
29
|
-
|
|
29
|
+
userDetails: __assign(__assign({}, props_8.userDetailsData), { breadcrumbs: props_4.breadCrumbsData }),
|
|
30
30
|
footer: __assign({}, props_6.footerData),
|
|
31
31
|
advisorSection: __assign(__assign({}, props_2.advisorsSectionData), { cardsLimit: 3 }),
|
|
32
32
|
};
|
|
@@ -2,9 +2,9 @@ import { AdvisorsSectionProps, BannerProps, CtaBannerProps, FooterProps, GetAppP
|
|
|
2
2
|
export interface UserDetailPageProps {
|
|
3
3
|
advisorSection: AdvisorsSectionProps;
|
|
4
4
|
banner: BannerProps;
|
|
5
|
-
|
|
5
|
+
ctaBanner: CtaBannerProps;
|
|
6
6
|
footer: FooterProps;
|
|
7
7
|
getAppBanner: GetAppProps;
|
|
8
8
|
navbar: NavbarProps;
|
|
9
|
-
|
|
9
|
+
userDetails: UserDetailsProps;
|
|
10
10
|
}
|
|
@@ -19,14 +19,14 @@ var user_details_1 = require("../../organisms/user-details/user-details");
|
|
|
19
19
|
var organisms_1 = require("../../organisms");
|
|
20
20
|
var react_1 = __importDefault(require("react"));
|
|
21
21
|
var UserDetailPage = function (_a) {
|
|
22
|
-
var advisorSection = _a.advisorSection, banner = _a.banner,
|
|
22
|
+
var advisorSection = _a.advisorSection, banner = _a.banner, ctaBanner = _a.ctaBanner, footer = _a.footer, getAppBanner = _a.getAppBanner, navbar = _a.navbar, userDetails = _a.userDetails;
|
|
23
23
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
24
24
|
react_1.default.createElement(organisms_1.Navbar, __assign({}, navbar)),
|
|
25
25
|
react_1.default.createElement(organisms_1.Banner, __assign({}, banner)),
|
|
26
|
-
react_1.default.createElement(user_details_1.UserDetails, __assign({},
|
|
26
|
+
react_1.default.createElement(user_details_1.UserDetails, __assign({}, userDetails)),
|
|
27
27
|
react_1.default.createElement(organisms_1.AdvisorsSection, __assign({}, advisorSection)),
|
|
28
28
|
react_1.default.createElement(organisms_1.GetAppBanner, __assign({}, getAppBanner)),
|
|
29
|
-
react_1.default.createElement(organisms_1.CtaBanner, __assign({},
|
|
29
|
+
react_1.default.createElement(organisms_1.CtaBanner, __assign({}, ctaBanner)),
|
|
30
30
|
react_1.default.createElement(organisms_1.Footer, __assign({}, footer))));
|
|
31
31
|
};
|
|
32
32
|
exports.UserDetailPage = UserDetailPage;
|