@appcorp/app-corp-vista 0.2.8 → 0.2.10
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.
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { VistaProductOverviewV3Props } from '../../type/vista-product-overview-type';
|
|
3
|
+
export declare const VistaProductOverviewV3: FC<VistaProductOverviewV3Props>;
|
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
"use strict";
|
|
3
|
+
var __assign = (this && this.__assign) || function () {
|
|
4
|
+
__assign = Object.assign || function(t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
8
|
+
t[p] = s[p];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
return __assign.apply(this, arguments);
|
|
13
|
+
};
|
|
3
14
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
15
|
if (k2 === undefined) k2 = k;
|
|
5
16
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -33,85 +44,107 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
44
|
return result;
|
|
34
45
|
};
|
|
35
46
|
})();
|
|
47
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
48
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
49
|
+
};
|
|
36
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
51
|
exports.VistaProductOverviewV3 = void 0;
|
|
38
|
-
var react_1 =
|
|
52
|
+
var react_1 = __importDefault(require("react"));
|
|
53
|
+
var dynamic_1 = __importDefault(require("next/dynamic"));
|
|
54
|
+
var image_1 = __importDefault(require("next/image"));
|
|
39
55
|
var solid_1 = require("@heroicons/react/20/solid");
|
|
40
56
|
var react_2 = require("@headlessui/react");
|
|
41
57
|
var outline_1 = require("@heroicons/react/24/outline");
|
|
42
58
|
var class_names_1 = require("../../utils/class-names");
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
breadcrumbs
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
};
|
|
59
|
-
var reviews = { average: 4, totalCount: 1624 };
|
|
60
|
-
var VistaProductOverviewV3 = function () {
|
|
61
|
-
var _a = (0, react_1.useState)(product.sizes[0]), selectedSize = _a[0], setSelectedSize = _a[1];
|
|
59
|
+
// import "slick-carousel/slick/slick.css";
|
|
60
|
+
// import "slick-carousel/slick/slick-theme.css";
|
|
61
|
+
var DynamicReactSlick = (0, dynamic_1.default)(function () { return Promise.resolve().then(function () { return __importStar(require('react-slick')); }); }, {
|
|
62
|
+
loading: function () { return react_1.default.createElement("p", null, "Loading..."); },
|
|
63
|
+
ssr: false,
|
|
64
|
+
});
|
|
65
|
+
var VistaProductOverviewV3 = function (_a) {
|
|
66
|
+
var averageReview = _a.averageReview, breadcrumbs = _a.breadcrumbs, description = _a.description, highlights = _a.highlights, images = _a.images, name = _a.name, price = _a.price, totalCountReview = _a.totalCountReview, variants = _a.variants;
|
|
67
|
+
var slickConfig = {
|
|
68
|
+
dots: true,
|
|
69
|
+
infinite: (images === null || images === void 0 ? void 0 : images.length) === 1 ? false : true,
|
|
70
|
+
speed: 500,
|
|
71
|
+
slidesToShow: 1,
|
|
72
|
+
slidesToScroll: 1,
|
|
73
|
+
};
|
|
62
74
|
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
63
75
|
react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8" },
|
|
64
76
|
react_1.default.createElement("div", { className: "lg:max-w-lg lg:self-end" },
|
|
65
77
|
react_1.default.createElement("nav", { "aria-label": "Breadcrumb" },
|
|
66
|
-
react_1.default.createElement("ol", { role: "list", className: "flex items-center space-x-2" },
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
react_1.default.createElement("
|
|
78
|
+
react_1.default.createElement("ol", { role: "list", className: "flex items-center space-x-2" }, breadcrumbs.map(function (_a, breadcrumbIdx) {
|
|
79
|
+
var id = _a.id, label = _a.label, route = _a.route;
|
|
80
|
+
return (react_1.default.createElement("li", { key: id },
|
|
81
|
+
react_1.default.createElement("div", { className: "flex items-center text-sm" },
|
|
82
|
+
react_1.default.createElement("a", { href: route, className: "font-medium text-gray-500 hover:text-gray-900" }, label),
|
|
83
|
+
breadcrumbIdx !== breadcrumbs.length - 1 ? (react_1.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", className: "ml-2 size-5 shrink-0 text-gray-300" },
|
|
84
|
+
react_1.default.createElement("path", { d: "M5.555 17.776l8-16 .894.448-8 16-.894-.448z" }))) : null)));
|
|
85
|
+
}))),
|
|
71
86
|
react_1.default.createElement("div", { className: "mt-4" },
|
|
72
|
-
react_1.default.createElement("h1", { className: "text-3xl font-bold tracking-tight text-
|
|
87
|
+
react_1.default.createElement("h1", { className: "text-3xl font-bold tracking-tight text-primary sm:text-4xl" }, name)),
|
|
73
88
|
react_1.default.createElement("section", { "aria-labelledby": "information-heading", className: "mt-4" },
|
|
74
89
|
react_1.default.createElement("h2", { id: "information-heading", className: "sr-only" }, "Product information"),
|
|
75
90
|
react_1.default.createElement("div", { className: "flex items-center" },
|
|
76
|
-
react_1.default.createElement("p", { className: "text-lg text-
|
|
91
|
+
react_1.default.createElement("p", { className: "text-lg text-primary sm:text-xl" }, price),
|
|
77
92
|
react_1.default.createElement("div", { className: "ml-4 border-l border-gray-300 pl-4" },
|
|
78
93
|
react_1.default.createElement("h2", { className: "sr-only" }, "Reviews"),
|
|
79
94
|
react_1.default.createElement("div", { className: "flex items-center" },
|
|
80
95
|
react_1.default.createElement("div", null,
|
|
81
|
-
react_1.default.createElement("div", { className: "flex items-center" }, [0, 1, 2, 3, 4].map(function (rating) { return (react_1.default.createElement(solid_1.StarIcon, { key: rating, "aria-hidden": "true", className: (0, class_names_1.classNames)(
|
|
96
|
+
react_1.default.createElement("div", { className: "flex items-center" }, [0, 1, 2, 3, 4].map(function (rating) { return (react_1.default.createElement(solid_1.StarIcon, { key: rating, "aria-hidden": "true", className: (0, class_names_1.classNames)(averageReview > rating ? 'text-yellow-400' : 'text-gray-300', 'size-5 shrink-0') })); })),
|
|
82
97
|
react_1.default.createElement("p", { className: "sr-only" },
|
|
83
|
-
|
|
98
|
+
averageReview,
|
|
84
99
|
" out of 5 stars")),
|
|
85
100
|
react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-500" },
|
|
86
|
-
|
|
101
|
+
totalCountReview,
|
|
87
102
|
" reviews")))),
|
|
88
103
|
react_1.default.createElement("div", { className: "mt-4 space-y-6" },
|
|
89
|
-
react_1.default.createElement("p", { className: "text-base text-gray-500" },
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
react_1.default.createElement("
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
104
|
+
react_1.default.createElement("p", { className: "text-base text-gray-500" }, description)),
|
|
105
|
+
highlights
|
|
106
|
+
.filter(function (_a) {
|
|
107
|
+
var enabled = _a.enabled;
|
|
108
|
+
return enabled;
|
|
109
|
+
})
|
|
110
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
111
|
+
.map(function (_a) {
|
|
112
|
+
var id = _a.id, icon = _a.icon, label = _a.label;
|
|
113
|
+
return (react_1.default.createElement("div", { key: id, className: "mt-6 flex items-center" },
|
|
114
|
+
icon,
|
|
115
|
+
react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-500" }, label)));
|
|
116
|
+
})),
|
|
117
|
+
react_1.default.createElement("div", { className: "mt-10 lg:col-start-1 lg:row-start-2 lg:max-w-lg lg:self-start" },
|
|
118
|
+
react_1.default.createElement("section", { "aria-labelledby": "options-heading" },
|
|
119
|
+
react_1.default.createElement("h2", { id: "options-heading", className: "sr-only" }, "Product options"),
|
|
120
|
+
react_1.default.createElement("form", null,
|
|
121
|
+
react_1.default.createElement("div", { className: "sm:flex sm:justify-between" },
|
|
122
|
+
react_1.default.createElement("fieldset", { className: 'flex flex-col gap-4' }, variants
|
|
123
|
+
.filter(function (_a) {
|
|
124
|
+
var enabled = _a.enabled;
|
|
125
|
+
return enabled;
|
|
126
|
+
})
|
|
127
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
128
|
+
.map(function (item) { return (react_1.default.createElement("div", { key: item.title },
|
|
129
|
+
react_1.default.createElement("legend", { className: "block text-sm font-medium text-gray-700" }, item.title),
|
|
130
|
+
react_1.default.createElement(react_2.RadioGroup, { className: "mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2", onChange: function (val) { return item.handleOnSelect(val); }, value: item.items[item.selectedItem] }, item.items.map(function (item) { return (react_1.default.createElement(react_2.Radio, { "aria-description": item.description, "aria-label": item.title, as: "div", className: "group relative block cursor-pointer rounded-lg border border-gray-300 p-4 focus:outline-hidden data-focus:ring-2 data-focus:ring-primary", key: item.title, value: item },
|
|
131
|
+
react_1.default.createElement("p", { className: "text-base font-medium text-primary" }, item.title),
|
|
132
|
+
react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, item.description),
|
|
133
|
+
react_1.default.createElement("div", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-px rounded-lg border-2 border-transparent group-data-checked:border-primary group-data-focus:border" }))); })))); }))),
|
|
134
|
+
react_1.default.createElement("div", { className: "mt-4" },
|
|
135
|
+
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-sm text-gray-500 hover:text-gray-700" },
|
|
136
|
+
react_1.default.createElement("span", null, "What size should I buy?"),
|
|
137
|
+
react_1.default.createElement(solid_1.QuestionMarkCircleIcon, { "aria-hidden": "true", className: "ml-2 size-5 shrink-0 text-gray-400 group-hover:text-gray-500" }))),
|
|
138
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
139
|
+
react_1.default.createElement("button", { type: "submit", className: "flex w-full items-center justify-center rounded-md border border-transparent bg-primary px-8 py-3 text-base font-medium text-white hover:bg-primary/80 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden" }, "Add to bag")),
|
|
140
|
+
react_1.default.createElement("div", { className: "mt-6 text-center" },
|
|
141
|
+
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
|
|
142
|
+
react_1.default.createElement(outline_1.ShieldCheckIcon, { "aria-hidden": "true", className: "mr-2 size-6 shrink-0 text-gray-400 group-hover:text-gray-500" }),
|
|
143
|
+
react_1.default.createElement("span", { className: "text-gray-500 hover:text-gray-700" }, "Lifetime Guarantee"))))))),
|
|
144
|
+
react_1.default.createElement("div", { className: 'mt-10 lg:max-w-lg lg:self-center' },
|
|
145
|
+
react_1.default.createElement(DynamicReactSlick, __assign({}, slickConfig), images.map(function (_a, ind) {
|
|
146
|
+
var url = _a.url, alt = _a.alt;
|
|
147
|
+
return (react_1.default.createElement(image_1.default, { key: ind, alt: alt, className: 'aspect-square w-full rounded-lg object-cover', sizes: '50vw', height: 100, src: url, width: 150 }));
|
|
148
|
+
}))))));
|
|
116
149
|
};
|
|
117
150
|
exports.VistaProductOverviewV3 = VistaProductOverviewV3;
|
package/package.json
CHANGED
|
@@ -1,11 +1,50 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
1
2
|
export interface VistaProductOverviewV1Props {
|
|
2
3
|
id: string;
|
|
3
4
|
}
|
|
4
5
|
export interface VistaProductOverviewV2Props {
|
|
5
6
|
id: string;
|
|
6
7
|
}
|
|
7
|
-
export interface
|
|
8
|
+
export interface VistaProductOverviewV3BreadcrumbItem {
|
|
9
|
+
id: string;
|
|
10
|
+
label: string;
|
|
11
|
+
route: string;
|
|
12
|
+
}
|
|
13
|
+
export interface VistaProductOverviewV3Variant {
|
|
14
|
+
enabled: boolean;
|
|
15
|
+
handleOnSelect: (item: VistaProductOverviewV3VariantItem) => void;
|
|
16
|
+
items: VistaProductOverviewV3VariantItem[];
|
|
17
|
+
order: number;
|
|
18
|
+
selectedItem: number;
|
|
19
|
+
title: string;
|
|
20
|
+
}
|
|
21
|
+
export interface VistaProductOverviewV3VariantItem {
|
|
22
|
+
description: string;
|
|
23
|
+
enabled: boolean;
|
|
24
|
+
order: number;
|
|
25
|
+
title: string;
|
|
26
|
+
}
|
|
27
|
+
export interface VistaProductOverviewV3Highlight {
|
|
28
|
+
enabled: boolean;
|
|
29
|
+
icon: ReactNode;
|
|
8
30
|
id: string;
|
|
31
|
+
label: string;
|
|
32
|
+
order: number;
|
|
33
|
+
}
|
|
34
|
+
export interface VistaProductOverviewV3Image {
|
|
35
|
+
alt: string;
|
|
36
|
+
url: string;
|
|
37
|
+
}
|
|
38
|
+
export interface VistaProductOverviewV3Props {
|
|
39
|
+
averageReview: number;
|
|
40
|
+
breadcrumbs: VistaProductOverviewV3BreadcrumbItem[];
|
|
41
|
+
description: string;
|
|
42
|
+
highlights: VistaProductOverviewV3Highlight[];
|
|
43
|
+
images: VistaProductOverviewV3Image[];
|
|
44
|
+
name: string;
|
|
45
|
+
price: string;
|
|
46
|
+
totalCountReview: number;
|
|
47
|
+
variants: VistaProductOverviewV3Variant[];
|
|
9
48
|
}
|
|
10
49
|
export interface VistaProductOverviewV4Props {
|
|
11
50
|
id: string;
|