@appcorp/app-corp-vista 0.1.15 → 0.1.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/organisms/vista-product-overview-v1/vista-product-overview-v1.d.ts +2 -0
- package/organisms/vista-product-overview-v1/vista-product-overview-v1.js +162 -0
- package/organisms/vista-product-overview-v2/vista-product-overview-v2.d.ts +2 -0
- package/organisms/vista-product-overview-v2/vista-product-overview-v2.js +130 -0
- package/organisms/vista-product-overview-v3/vista-product-overview-v3.d.ts +2 -0
- package/organisms/vista-product-overview-v3/vista-product-overview-v3.js +117 -0
- package/organisms/vista-product-overview-v4/vista-product-overview-v4.d.ts +2 -0
- package/organisms/vista-product-overview-v4/vista-product-overview-v4.js +180 -0
- package/organisms/vista-product-overview-v5/vista-product-overview-v5.d.ts +2 -0
- package/organisms/vista-product-overview-v5/vista-product-overview-v5.js +184 -0
- package/package.json +1 -1
- package/type/vista-product-overview-type.d.ts +15 -0
- package/type/vista-product-overview-type.js +2 -0
- package/utils/form-schema.d.ts +2 -0
- package/utils/form-schema.js +2 -0
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.VistaProductOverviewV1 = void 0;
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
39
|
+
var solid_1 = require("@heroicons/react/20/solid");
|
|
40
|
+
var react_2 = require("@headlessui/react");
|
|
41
|
+
var outline_1 = require("@heroicons/react/24/outline");
|
|
42
|
+
var class_names_1 = require("../../utils/class-names");
|
|
43
|
+
var product = {
|
|
44
|
+
name: 'Basic Tee',
|
|
45
|
+
price: '$35',
|
|
46
|
+
rating: 3.9,
|
|
47
|
+
reviewCount: 512,
|
|
48
|
+
href: '#',
|
|
49
|
+
breadcrumbs: [
|
|
50
|
+
{ id: 1, name: 'Women', href: '#' },
|
|
51
|
+
{ id: 2, name: 'Clothing', href: '#' },
|
|
52
|
+
],
|
|
53
|
+
images: [
|
|
54
|
+
{
|
|
55
|
+
id: 1,
|
|
56
|
+
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-featured-product-shot.jpg',
|
|
57
|
+
imageAlt: "Back of women's Basic Tee in black.",
|
|
58
|
+
primary: true,
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
id: 2,
|
|
62
|
+
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-product-shot-01.jpg',
|
|
63
|
+
imageAlt: "Side profile of women's Basic Tee in black.",
|
|
64
|
+
primary: false,
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
id: 3,
|
|
68
|
+
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-product-shot-02.jpg',
|
|
69
|
+
imageAlt: "Front of women's Basic Tee in black.",
|
|
70
|
+
primary: false,
|
|
71
|
+
},
|
|
72
|
+
],
|
|
73
|
+
colors: [
|
|
74
|
+
{ name: 'Black', bgColor: 'bg-gray-900', selectedColor: 'ring-gray-900' },
|
|
75
|
+
{ name: 'Heather Grey', bgColor: 'bg-gray-400', selectedColor: 'ring-gray-400' },
|
|
76
|
+
],
|
|
77
|
+
sizes: [
|
|
78
|
+
{ name: 'XXS', inStock: true },
|
|
79
|
+
{ name: 'XS', inStock: true },
|
|
80
|
+
{ name: 'S', inStock: true },
|
|
81
|
+
{ name: 'M', inStock: true },
|
|
82
|
+
{ name: 'L', inStock: true },
|
|
83
|
+
{ name: 'XL', inStock: false },
|
|
84
|
+
],
|
|
85
|
+
description: "\n <p>The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.</p>\n <p>Looking to stock your closet? The Basic tee also comes in a 3-pack or 5-pack at a bundle discount.</p>\n ",
|
|
86
|
+
details: [
|
|
87
|
+
'Only the best materials',
|
|
88
|
+
'Ethically and locally made',
|
|
89
|
+
'Pre-washed and pre-shrunk',
|
|
90
|
+
'Machine wash cold with similar colors',
|
|
91
|
+
],
|
|
92
|
+
};
|
|
93
|
+
var policies = [
|
|
94
|
+
{ name: 'International delivery', icon: outline_1.GlobeAmericasIcon, description: 'Get your order in 2 years' },
|
|
95
|
+
{ name: 'Loyalty rewards', icon: outline_1.CurrencyDollarIcon, description: "Don't look at other tees" },
|
|
96
|
+
];
|
|
97
|
+
var VistaProductOverviewV1 = function () {
|
|
98
|
+
var _a = (0, react_1.useState)(product.colors[0]), selectedColor = _a[0], setSelectedColor = _a[1];
|
|
99
|
+
var _b = (0, react_1.useState)(product.sizes[2]), selectedSize = _b[0], setSelectedSize = _b[1];
|
|
100
|
+
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
101
|
+
react_1.default.createElement("div", { className: "pt-6 pb-16 sm:pb-24" },
|
|
102
|
+
react_1.default.createElement("nav", { "aria-label": "Breadcrumb", className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" },
|
|
103
|
+
react_1.default.createElement("ol", { role: "list", className: "flex items-center space-x-4" },
|
|
104
|
+
product.breadcrumbs.map(function (breadcrumb) { return (react_1.default.createElement("li", { key: breadcrumb.id },
|
|
105
|
+
react_1.default.createElement("div", { className: "flex items-center" },
|
|
106
|
+
react_1.default.createElement("a", { href: breadcrumb.href, className: "mr-4 text-sm font-medium text-gray-900" }, breadcrumb.name),
|
|
107
|
+
react_1.default.createElement("svg", { viewBox: "0 0 6 20", "aria-hidden": "true", className: "h-5 w-auto text-gray-300" },
|
|
108
|
+
react_1.default.createElement("path", { d: "M4.878 4.34H3.551L.27 16.532h1.327l3.281-12.19z", fill: "currentColor" }))))); }),
|
|
109
|
+
react_1.default.createElement("li", { className: "text-sm" },
|
|
110
|
+
react_1.default.createElement("a", { href: product.href, "aria-current": "page", className: "font-medium text-gray-500 hover:text-gray-600" }, product.name)))),
|
|
111
|
+
react_1.default.createElement("div", { className: "mx-auto mt-8 max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8" },
|
|
112
|
+
react_1.default.createElement("div", { className: "lg:grid lg:auto-rows-min lg:grid-cols-12 lg:gap-x-8" },
|
|
113
|
+
react_1.default.createElement("div", { className: "lg:col-span-5 lg:col-start-8" },
|
|
114
|
+
react_1.default.createElement("div", { className: "flex justify-between" },
|
|
115
|
+
react_1.default.createElement("h1", { className: "text-xl font-medium text-gray-900" }, product.name),
|
|
116
|
+
react_1.default.createElement("p", { className: "text-xl font-medium text-gray-900" }, product.price)),
|
|
117
|
+
react_1.default.createElement("div", { className: "mt-4" },
|
|
118
|
+
react_1.default.createElement("h2", { className: "sr-only" }, "Reviews"),
|
|
119
|
+
react_1.default.createElement("div", { className: "flex items-center" },
|
|
120
|
+
react_1.default.createElement("p", { className: "text-sm text-gray-700" },
|
|
121
|
+
product.rating,
|
|
122
|
+
react_1.default.createElement("span", { className: "sr-only" }, " out of 5 stars")),
|
|
123
|
+
react_1.default.createElement("div", { className: "ml-1 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)(product.rating > rating ? 'text-yellow-400' : 'text-gray-200', 'size-5 shrink-0') })); })),
|
|
124
|
+
react_1.default.createElement("div", { "aria-hidden": "true", className: "ml-4 text-sm text-gray-300" }, "\u00B7"),
|
|
125
|
+
react_1.default.createElement("div", { className: "ml-4 flex" },
|
|
126
|
+
react_1.default.createElement("a", { href: "#", className: "text-sm font-medium text-indigo-600 hover:text-indigo-500" },
|
|
127
|
+
"See all ",
|
|
128
|
+
product.reviewCount,
|
|
129
|
+
" reviews"))))),
|
|
130
|
+
react_1.default.createElement("div", { className: "mt-8 lg:col-span-7 lg:col-start-1 lg:row-span-3 lg:row-start-1 lg:mt-0" },
|
|
131
|
+
react_1.default.createElement("h2", { className: "sr-only" }, "Images"),
|
|
132
|
+
react_1.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-3 lg:gap-8" }, product.images.map(function (image) { return (react_1.default.createElement("img", { key: image.id, alt: image.imageAlt, src: image.imageSrc, className: (0, class_names_1.classNames)(image.primary ? 'lg:col-span-2 lg:row-span-2' : 'hidden lg:block', 'rounded-lg') })); }))),
|
|
133
|
+
react_1.default.createElement("div", { className: "mt-8 lg:col-span-5" },
|
|
134
|
+
react_1.default.createElement("form", null,
|
|
135
|
+
react_1.default.createElement("div", null,
|
|
136
|
+
react_1.default.createElement("h2", { className: "text-sm font-medium text-gray-900" }, "Color"),
|
|
137
|
+
react_1.default.createElement("fieldset", { "aria-label": "Choose a color", className: "mt-2" },
|
|
138
|
+
react_1.default.createElement(react_2.RadioGroup, { value: selectedColor, onChange: setSelectedColor, className: "flex items-center gap-x-3" }, product.colors.map(function (color) { return (react_1.default.createElement(react_2.Radio, { key: color.name, value: color, "aria-label": color.name, className: (0, class_names_1.classNames)(color.selectedColor, 'relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-hidden data-checked:ring-2 data-focus:data-checked:ring-3 data-focus:data-checked:ring-offset-1') },
|
|
139
|
+
react_1.default.createElement("span", { "aria-hidden": "true", className: (0, class_names_1.classNames)(color.bgColor, 'size-8 rounded-full border border-black/10') }))); })))),
|
|
140
|
+
react_1.default.createElement("div", { className: "mt-8" },
|
|
141
|
+
react_1.default.createElement("div", { className: "flex items-center justify-between" },
|
|
142
|
+
react_1.default.createElement("h2", { className: "text-sm font-medium text-gray-900" }, "Size"),
|
|
143
|
+
react_1.default.createElement("a", { href: "#", className: "text-sm font-medium text-indigo-600 hover:text-indigo-500" }, "See sizing chart")),
|
|
144
|
+
react_1.default.createElement("fieldset", { "aria-label": "Choose a size", className: "mt-2" },
|
|
145
|
+
react_1.default.createElement(react_2.RadioGroup, { value: selectedSize, onChange: setSelectedSize, className: "grid grid-cols-3 gap-3 sm:grid-cols-6" }, product.sizes.map(function (size) { return (react_1.default.createElement(react_2.Radio, { key: size.name, value: size, disabled: !size.inStock, className: (0, class_names_1.classNames)(size.inStock ? 'cursor-pointer focus:outline-hidden' : 'cursor-not-allowed opacity-25', 'flex items-center justify-center rounded-md border border-gray-200 bg-white px-3 py-3 text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 data-checked:border-transparent data-checked:bg-indigo-600 data-checked:text-white data-checked:hover:bg-indigo-700 data-focus:ring-2 data-focus:ring-indigo-500 data-focus:ring-offset-2 sm:flex-1') }, size.name)); })))),
|
|
146
|
+
react_1.default.createElement("button", { type: "submit", className: "mt-8 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden" }, "Add to cart")),
|
|
147
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
148
|
+
react_1.default.createElement("h2", { className: "text-sm font-medium text-gray-900" }, "Description"),
|
|
149
|
+
react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: product.description }, className: "mt-4 space-y-4 text-sm/6 text-gray-500" })),
|
|
150
|
+
react_1.default.createElement("div", { className: "mt-8 border-t border-gray-200 pt-8" },
|
|
151
|
+
react_1.default.createElement("h2", { className: "text-sm font-medium text-gray-900" }, "Fabric & Care"),
|
|
152
|
+
react_1.default.createElement("div", { className: "mt-4" },
|
|
153
|
+
react_1.default.createElement("ul", { role: "list", className: "list-disc space-y-1 pl-5 text-sm/6 text-gray-500 marker:text-gray-300" }, product.details.map(function (item) { return (react_1.default.createElement("li", { key: item, className: "pl-2" }, item)); })))),
|
|
154
|
+
react_1.default.createElement("section", { "aria-labelledby": "policies-heading", className: "mt-10" },
|
|
155
|
+
react_1.default.createElement("h2", { id: "policies-heading", className: "sr-only" }, "Our Policies"),
|
|
156
|
+
react_1.default.createElement("dl", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2" }, policies.map(function (policy) { return (react_1.default.createElement("div", { key: policy.name, className: "rounded-lg border border-gray-200 bg-gray-50 p-6 text-center" },
|
|
157
|
+
react_1.default.createElement("dt", null,
|
|
158
|
+
react_1.default.createElement(policy.icon, { "aria-hidden": "true", className: "mx-auto size-6 shrink-0 text-gray-400" }),
|
|
159
|
+
react_1.default.createElement("span", { className: "mt-4 text-sm font-medium text-gray-900" }, policy.name)),
|
|
160
|
+
react_1.default.createElement("dd", { className: "mt-1 text-sm text-gray-500" }, policy.description))); })))))))));
|
|
161
|
+
};
|
|
162
|
+
exports.VistaProductOverviewV1 = VistaProductOverviewV1;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.VistaProductOverviewV2 = void 0;
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
39
|
+
var react_2 = require("@headlessui/react");
|
|
40
|
+
var solid_1 = require("@heroicons/react/20/solid");
|
|
41
|
+
var outline_1 = require("@heroicons/react/24/outline");
|
|
42
|
+
var class_names_1 = require("../../utils/class-names");
|
|
43
|
+
var product = {
|
|
44
|
+
name: 'Zip Tote Basket',
|
|
45
|
+
price: '$140',
|
|
46
|
+
rating: 4,
|
|
47
|
+
images: [
|
|
48
|
+
{
|
|
49
|
+
id: 1,
|
|
50
|
+
name: 'Angled view',
|
|
51
|
+
src: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-product-01.jpg',
|
|
52
|
+
alt: 'Angled front view with bag zipped and handles upright.',
|
|
53
|
+
},
|
|
54
|
+
// More images...
|
|
55
|
+
],
|
|
56
|
+
colors: [
|
|
57
|
+
{ name: 'Washed Black', bgColor: 'bg-gray-700', selectedColor: 'ring-gray-700' },
|
|
58
|
+
{ name: 'White', bgColor: 'bg-white', selectedColor: 'ring-gray-400' },
|
|
59
|
+
{ name: 'Washed Gray', bgColor: 'bg-gray-500', selectedColor: 'ring-gray-500' },
|
|
60
|
+
],
|
|
61
|
+
description: "\n <p>The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.</p>\n ",
|
|
62
|
+
details: [
|
|
63
|
+
{
|
|
64
|
+
name: 'Features',
|
|
65
|
+
items: [
|
|
66
|
+
'Multiple strap configurations',
|
|
67
|
+
'Spacious interior with top zip',
|
|
68
|
+
'Leather handle and tabs',
|
|
69
|
+
'Interior dividers',
|
|
70
|
+
'Stainless strap loops',
|
|
71
|
+
'Double stitched construction',
|
|
72
|
+
'Water-resistant',
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
// More sections...
|
|
76
|
+
],
|
|
77
|
+
};
|
|
78
|
+
var VistaProductOverviewV2 = function () {
|
|
79
|
+
var _a = (0, react_1.useState)(product.colors[0]), selectedColor = _a[0], setSelectedColor = _a[1];
|
|
80
|
+
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
81
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8" },
|
|
82
|
+
react_1.default.createElement("div", { className: "lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8" },
|
|
83
|
+
react_1.default.createElement(react_2.TabGroup, { className: "flex flex-col-reverse" },
|
|
84
|
+
react_1.default.createElement("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none" },
|
|
85
|
+
react_1.default.createElement(react_2.TabList, { className: "grid grid-cols-4 gap-6" }, product.images.map(function (image) { return (react_1.default.createElement(react_2.Tab, { key: image.id, className: "group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-indigo-500/50 focus:ring-offset-4 focus:outline-hidden" },
|
|
86
|
+
react_1.default.createElement("span", { className: "sr-only" }, image.name),
|
|
87
|
+
react_1.default.createElement("span", { className: "absolute inset-0 overflow-hidden rounded-md" },
|
|
88
|
+
react_1.default.createElement("img", { alt: "", src: image.src, className: "size-full object-cover" })),
|
|
89
|
+
react_1.default.createElement("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 rounded-md ring-2 ring-transparent ring-offset-2 group-data-selected:ring-indigo-500" }))); }))),
|
|
90
|
+
react_1.default.createElement(react_2.TabPanels, null, product.images.map(function (image) { return (react_1.default.createElement(react_2.TabPanel, { key: image.id },
|
|
91
|
+
react_1.default.createElement("img", { alt: image.alt, src: image.src, className: "aspect-square w-full object-cover sm:rounded-lg" }))); }))),
|
|
92
|
+
react_1.default.createElement("div", { className: "mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0" },
|
|
93
|
+
react_1.default.createElement("h1", { className: "text-3xl font-bold tracking-tight text-gray-900" }, product.name),
|
|
94
|
+
react_1.default.createElement("div", { className: "mt-3" },
|
|
95
|
+
react_1.default.createElement("h2", { className: "sr-only" }, "Product information"),
|
|
96
|
+
react_1.default.createElement("p", { className: "text-3xl tracking-tight text-gray-900" }, product.price)),
|
|
97
|
+
react_1.default.createElement("div", { className: "mt-3" },
|
|
98
|
+
react_1.default.createElement("h3", { className: "sr-only" }, "Reviews"),
|
|
99
|
+
react_1.default.createElement("div", { className: "flex items-center" },
|
|
100
|
+
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)(product.rating > rating ? 'text-indigo-500' : 'text-gray-300', 'size-5 shrink-0') })); })),
|
|
101
|
+
react_1.default.createElement("p", { className: "sr-only" },
|
|
102
|
+
product.rating,
|
|
103
|
+
" out of 5 stars"))),
|
|
104
|
+
react_1.default.createElement("div", { className: "mt-6" },
|
|
105
|
+
react_1.default.createElement("h3", { className: "sr-only" }, "Description"),
|
|
106
|
+
react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: product.description }, className: "space-y-6 text-base text-gray-700" })),
|
|
107
|
+
react_1.default.createElement("form", { className: "mt-6" },
|
|
108
|
+
react_1.default.createElement("div", null,
|
|
109
|
+
react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-600" }, "Color"),
|
|
110
|
+
react_1.default.createElement("fieldset", { "aria-label": "Choose a color", className: "mt-2" },
|
|
111
|
+
react_1.default.createElement(react_2.RadioGroup, { value: selectedColor, onChange: setSelectedColor, className: "flex items-center gap-x-3" }, product.colors.map(function (color) { return (react_1.default.createElement(react_2.Radio, { key: color.name, value: color, "aria-label": color.name, className: (0, class_names_1.classNames)(color.selectedColor, 'relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-hidden data-checked:ring-2 data-focus:data-checked:ring-3 data-focus:data-checked:ring-offset-1') },
|
|
112
|
+
react_1.default.createElement("span", { "aria-hidden": "true", className: (0, class_names_1.classNames)(color.bgColor, 'size-8 rounded-full border border-black/10') }))); })))),
|
|
113
|
+
react_1.default.createElement("div", { className: "mt-10 flex" },
|
|
114
|
+
react_1.default.createElement("button", { type: "submit", className: "flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden sm:w-full" }, "Add to bag"),
|
|
115
|
+
react_1.default.createElement("button", { type: "button", className: "ml-4 flex items-center justify-center rounded-md px-3 py-3 text-gray-400 hover:bg-gray-100 hover:text-gray-500" },
|
|
116
|
+
react_1.default.createElement(outline_1.HeartIcon, { "aria-hidden": "true", className: "size-6 shrink-0" }),
|
|
117
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Add to favorites")))),
|
|
118
|
+
react_1.default.createElement("section", { "aria-labelledby": "details-heading", className: "mt-12" },
|
|
119
|
+
react_1.default.createElement("h2", { id: "details-heading", className: "sr-only" }, "Additional details"),
|
|
120
|
+
react_1.default.createElement("div", { className: "divide-y divide-gray-200 border-t" }, product.details.map(function (detail) { return (react_1.default.createElement(react_2.Disclosure, { key: detail.name, as: "div" },
|
|
121
|
+
react_1.default.createElement("h3", null,
|
|
122
|
+
react_1.default.createElement(react_2.DisclosureButton, { className: "group relative flex w-full items-center justify-between py-6 text-left" },
|
|
123
|
+
react_1.default.createElement("span", { className: "text-sm font-medium text-gray-900 group-data-open:text-indigo-600" }, detail.name),
|
|
124
|
+
react_1.default.createElement("span", { className: "ml-6 flex items-center" },
|
|
125
|
+
react_1.default.createElement(outline_1.PlusIcon, { "aria-hidden": "true", className: "block size-6 text-gray-400 group-hover:text-gray-500 group-data-open:hidden" }),
|
|
126
|
+
react_1.default.createElement(outline_1.MinusIcon, { "aria-hidden": "true", className: "hidden size-6 text-indigo-400 group-hover:text-indigo-500 group-data-open:block" })))),
|
|
127
|
+
react_1.default.createElement(react_2.DisclosurePanel, { className: "pb-6" },
|
|
128
|
+
react_1.default.createElement("ul", { role: "list", className: "list-disc space-y-1 pl-5 text-sm/6 text-gray-700 marker:text-gray-300" }, detail.items.map(function (item) { return (react_1.default.createElement("li", { key: item, className: "pl-2" }, item)); }))))); }))))))));
|
|
129
|
+
};
|
|
130
|
+
exports.VistaProductOverviewV2 = VistaProductOverviewV2;
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.VistaProductOverviewV3 = void 0;
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
39
|
+
var solid_1 = require("@heroicons/react/20/solid");
|
|
40
|
+
var react_2 = require("@headlessui/react");
|
|
41
|
+
var outline_1 = require("@heroicons/react/24/outline");
|
|
42
|
+
var class_names_1 = require("../../utils/class-names");
|
|
43
|
+
var product = {
|
|
44
|
+
name: 'Everyday Ruck Snack',
|
|
45
|
+
href: '#',
|
|
46
|
+
price: '$220',
|
|
47
|
+
description: "Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.",
|
|
48
|
+
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-04-featured-product-shot.jpg',
|
|
49
|
+
imageAlt: 'Model wearing light green backpack with black canvas straps and front zipper pouch.',
|
|
50
|
+
breadcrumbs: [
|
|
51
|
+
{ id: 1, name: 'Travel', href: '#' },
|
|
52
|
+
{ id: 2, name: 'Bags', href: '#' },
|
|
53
|
+
],
|
|
54
|
+
sizes: [
|
|
55
|
+
{ name: '18L', description: 'Perfect for a reasonable amount of snacks.' },
|
|
56
|
+
{ name: '20L', description: 'Enough room for a serious amount of snacks.' },
|
|
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];
|
|
62
|
+
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
63
|
+
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
|
+
react_1.default.createElement("div", { className: "lg:max-w-lg lg:self-end" },
|
|
65
|
+
react_1.default.createElement("nav", { "aria-label": "Breadcrumb" },
|
|
66
|
+
react_1.default.createElement("ol", { role: "list", className: "flex items-center space-x-2" }, product.breadcrumbs.map(function (breadcrumb, breadcrumbIdx) { return (react_1.default.createElement("li", { key: breadcrumb.id },
|
|
67
|
+
react_1.default.createElement("div", { className: "flex items-center text-sm" },
|
|
68
|
+
react_1.default.createElement("a", { href: breadcrumb.href, className: "font-medium text-gray-500 hover:text-gray-900" }, breadcrumb.name),
|
|
69
|
+
breadcrumbIdx !== product.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" },
|
|
70
|
+
react_1.default.createElement("path", { d: "M5.555 17.776l8-16 .894.448-8 16-.894-.448z" }))) : null))); }))),
|
|
71
|
+
react_1.default.createElement("div", { className: "mt-4" },
|
|
72
|
+
react_1.default.createElement("h1", { className: "text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, product.name)),
|
|
73
|
+
react_1.default.createElement("section", { "aria-labelledby": "information-heading", className: "mt-4" },
|
|
74
|
+
react_1.default.createElement("h2", { id: "information-heading", className: "sr-only" }, "Product information"),
|
|
75
|
+
react_1.default.createElement("div", { className: "flex items-center" },
|
|
76
|
+
react_1.default.createElement("p", { className: "text-lg text-gray-900 sm:text-xl" }, product.price),
|
|
77
|
+
react_1.default.createElement("div", { className: "ml-4 border-l border-gray-300 pl-4" },
|
|
78
|
+
react_1.default.createElement("h2", { className: "sr-only" }, "Reviews"),
|
|
79
|
+
react_1.default.createElement("div", { className: "flex items-center" },
|
|
80
|
+
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)(reviews.average > rating ? 'text-yellow-400' : 'text-gray-300', 'size-5 shrink-0') })); })),
|
|
82
|
+
react_1.default.createElement("p", { className: "sr-only" },
|
|
83
|
+
reviews.average,
|
|
84
|
+
" out of 5 stars")),
|
|
85
|
+
react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-500" },
|
|
86
|
+
reviews.totalCount,
|
|
87
|
+
" reviews")))),
|
|
88
|
+
react_1.default.createElement("div", { className: "mt-4 space-y-6" },
|
|
89
|
+
react_1.default.createElement("p", { className: "text-base text-gray-500" }, product.description)),
|
|
90
|
+
react_1.default.createElement("div", { className: "mt-6 flex items-center" },
|
|
91
|
+
react_1.default.createElement(solid_1.CheckIcon, { "aria-hidden": "true", className: "size-5 shrink-0 text-green-500" }),
|
|
92
|
+
react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-500" }, "In stock and ready to ship")))),
|
|
93
|
+
react_1.default.createElement("div", { className: "mt-10 lg:col-start-2 lg:row-span-2 lg:mt-0 lg:self-center" },
|
|
94
|
+
react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-square w-full rounded-lg object-cover" })),
|
|
95
|
+
react_1.default.createElement("div", { className: "mt-10 lg:col-start-1 lg:row-start-2 lg:max-w-lg lg:self-start" },
|
|
96
|
+
react_1.default.createElement("section", { "aria-labelledby": "options-heading" },
|
|
97
|
+
react_1.default.createElement("h2", { id: "options-heading", className: "sr-only" }, "Product options"),
|
|
98
|
+
react_1.default.createElement("form", null,
|
|
99
|
+
react_1.default.createElement("div", { className: "sm:flex sm:justify-between" },
|
|
100
|
+
react_1.default.createElement("fieldset", null,
|
|
101
|
+
react_1.default.createElement("legend", { className: "block text-sm font-medium text-gray-700" }, "Size"),
|
|
102
|
+
react_1.default.createElement(react_2.RadioGroup, { value: selectedSize, onChange: setSelectedSize, className: "mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2" }, product.sizes.map(function (size) { return (react_1.default.createElement(react_2.Radio, { key: size.name, as: "div", value: size, "aria-label": size.name, "aria-description": size.description, className: "group relative block cursor-pointer rounded-lg border border-gray-300 p-4 focus:outline-hidden data-focus:ring-2 data-focus:ring-indigo-500" },
|
|
103
|
+
react_1.default.createElement("p", { className: "text-base font-medium text-gray-900" }, size.name),
|
|
104
|
+
react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, size.description),
|
|
105
|
+
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-indigo-500 group-data-focus:border" }))); })))),
|
|
106
|
+
react_1.default.createElement("div", { className: "mt-4" },
|
|
107
|
+
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-sm text-gray-500 hover:text-gray-700" },
|
|
108
|
+
react_1.default.createElement("span", null, "What size should I buy?"),
|
|
109
|
+
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" }))),
|
|
110
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
111
|
+
react_1.default.createElement("button", { type: "submit", className: "flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden" }, "Add to bag")),
|
|
112
|
+
react_1.default.createElement("div", { className: "mt-6 text-center" },
|
|
113
|
+
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
|
|
114
|
+
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" }),
|
|
115
|
+
react_1.default.createElement("span", { className: "text-gray-500 hover:text-gray-700" }, "Lifetime Guarantee")))))))));
|
|
116
|
+
};
|
|
117
|
+
exports.VistaProductOverviewV3 = VistaProductOverviewV3;
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
/*
|
|
2
|
+
This example requires some changes to your config:
|
|
3
|
+
|
|
4
|
+
```
|
|
5
|
+
// tailwind.config.js
|
|
6
|
+
module.exports = {
|
|
7
|
+
// ...
|
|
8
|
+
theme: {
|
|
9
|
+
extend: {
|
|
10
|
+
gridTemplateRows: {
|
|
11
|
+
'[auto,auto,1fr]': 'auto auto 1fr',
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
}
|
|
16
|
+
```
|
|
17
|
+
*/
|
|
18
|
+
'use client';
|
|
19
|
+
"use strict";
|
|
20
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
23
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
24
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
25
|
+
}
|
|
26
|
+
Object.defineProperty(o, k2, desc);
|
|
27
|
+
}) : (function(o, m, k, k2) {
|
|
28
|
+
if (k2 === undefined) k2 = k;
|
|
29
|
+
o[k2] = m[k];
|
|
30
|
+
}));
|
|
31
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
32
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
33
|
+
}) : function(o, v) {
|
|
34
|
+
o["default"] = v;
|
|
35
|
+
});
|
|
36
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
37
|
+
var ownKeys = function(o) {
|
|
38
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
39
|
+
var ar = [];
|
|
40
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
41
|
+
return ar;
|
|
42
|
+
};
|
|
43
|
+
return ownKeys(o);
|
|
44
|
+
};
|
|
45
|
+
return function (mod) {
|
|
46
|
+
if (mod && mod.__esModule) return mod;
|
|
47
|
+
var result = {};
|
|
48
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
49
|
+
__setModuleDefault(result, mod);
|
|
50
|
+
return result;
|
|
51
|
+
};
|
|
52
|
+
})();
|
|
53
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
54
|
+
exports.VistaProductOverviewV4 = void 0;
|
|
55
|
+
var react_1 = __importStar(require("react"));
|
|
56
|
+
var solid_1 = require("@heroicons/react/20/solid");
|
|
57
|
+
var react_2 = require("@headlessui/react");
|
|
58
|
+
var class_names_1 = require("../../utils/class-names");
|
|
59
|
+
var product = {
|
|
60
|
+
name: 'Basic Tee 6-Pack',
|
|
61
|
+
price: '$192',
|
|
62
|
+
href: '#',
|
|
63
|
+
breadcrumbs: [
|
|
64
|
+
{ id: 1, name: 'Men', href: '#' },
|
|
65
|
+
{ id: 2, name: 'Clothing', href: '#' },
|
|
66
|
+
],
|
|
67
|
+
images: [
|
|
68
|
+
{
|
|
69
|
+
src: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-02-secondary-product-shot.jpg',
|
|
70
|
+
alt: 'Two each of gray, white, and black shirts laying flat.',
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
src: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg',
|
|
74
|
+
alt: 'Model wearing plain black basic tee.',
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
src: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-02-tertiary-product-shot-02.jpg',
|
|
78
|
+
alt: 'Model wearing plain gray basic tee.',
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
src: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-02-featured-product-shot.jpg',
|
|
82
|
+
alt: 'Model wearing plain white basic tee.',
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
colors: [
|
|
86
|
+
{ name: 'White', class: 'bg-white', selectedClass: 'ring-gray-400' },
|
|
87
|
+
{ name: 'Gray', class: 'bg-gray-200', selectedClass: 'ring-gray-400' },
|
|
88
|
+
{ name: 'Black', class: 'bg-gray-900', selectedClass: 'ring-gray-900' },
|
|
89
|
+
],
|
|
90
|
+
sizes: [
|
|
91
|
+
{ name: 'XXS', inStock: false },
|
|
92
|
+
{ name: 'XS', inStock: true },
|
|
93
|
+
{ name: 'S', inStock: true },
|
|
94
|
+
{ name: 'M', inStock: true },
|
|
95
|
+
{ name: 'L', inStock: true },
|
|
96
|
+
{ name: 'XL', inStock: true },
|
|
97
|
+
{ name: '2XL', inStock: true },
|
|
98
|
+
{ name: '3XL', inStock: true },
|
|
99
|
+
],
|
|
100
|
+
description: 'The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.',
|
|
101
|
+
highlights: [
|
|
102
|
+
'Hand cut and sewn locally',
|
|
103
|
+
'Dyed with our proprietary colors',
|
|
104
|
+
'Pre-washed & pre-shrunk',
|
|
105
|
+
'Ultra-soft 100% cotton',
|
|
106
|
+
],
|
|
107
|
+
details: 'The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.',
|
|
108
|
+
};
|
|
109
|
+
var reviews = { href: '#', average: 4, totalCount: 117 };
|
|
110
|
+
var VistaProductOverviewV4 = function () {
|
|
111
|
+
var _a = (0, react_1.useState)(product.colors[0]), selectedColor = _a[0], setSelectedColor = _a[1];
|
|
112
|
+
var _b = (0, react_1.useState)(product.sizes[2]), selectedSize = _b[0], setSelectedSize = _b[1];
|
|
113
|
+
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
114
|
+
react_1.default.createElement("div", { className: "pt-6" },
|
|
115
|
+
react_1.default.createElement("nav", { "aria-label": "Breadcrumb" },
|
|
116
|
+
react_1.default.createElement("ol", { role: "list", className: "mx-auto flex max-w-2xl items-center space-x-2 px-4 sm:px-6 lg:max-w-7xl lg:px-8" },
|
|
117
|
+
product.breadcrumbs.map(function (breadcrumb) { return (react_1.default.createElement("li", { key: breadcrumb.id },
|
|
118
|
+
react_1.default.createElement("div", { className: "flex items-center" },
|
|
119
|
+
react_1.default.createElement("a", { href: breadcrumb.href, className: "mr-2 text-sm font-medium text-gray-900" }, breadcrumb.name),
|
|
120
|
+
react_1.default.createElement("svg", { fill: "currentColor", width: 16, height: 20, viewBox: "0 0 16 20", "aria-hidden": "true", className: "h-5 w-4 text-gray-300" },
|
|
121
|
+
react_1.default.createElement("path", { d: "M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" }))))); }),
|
|
122
|
+
react_1.default.createElement("li", { className: "text-sm" },
|
|
123
|
+
react_1.default.createElement("a", { href: product.href, "aria-current": "page", className: "font-medium text-gray-500 hover:text-gray-600" }, product.name)))),
|
|
124
|
+
react_1.default.createElement("div", { className: "mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8 lg:px-8" },
|
|
125
|
+
react_1.default.createElement("img", { alt: product.images[0].alt, src: product.images[0].src, className: "hidden size-full rounded-lg object-cover lg:block" }),
|
|
126
|
+
react_1.default.createElement("div", { className: "hidden lg:grid lg:grid-cols-1 lg:gap-y-8" },
|
|
127
|
+
react_1.default.createElement("img", { alt: product.images[1].alt, src: product.images[1].src, className: "aspect-3/2 w-full rounded-lg object-cover" }),
|
|
128
|
+
react_1.default.createElement("img", { alt: product.images[2].alt, src: product.images[2].src, className: "aspect-3/2 w-full rounded-lg object-cover" })),
|
|
129
|
+
react_1.default.createElement("img", { alt: product.images[3].alt, src: product.images[3].src, className: "aspect-4/5 size-full object-cover sm:rounded-lg lg:aspect-auto" })),
|
|
130
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 pt-10 pb-16 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:px-8 lg:pt-16 lg:pb-24" },
|
|
131
|
+
react_1.default.createElement("div", { className: "lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8" },
|
|
132
|
+
react_1.default.createElement("h1", { className: "text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl" }, product.name)),
|
|
133
|
+
react_1.default.createElement("div", { className: "mt-4 lg:row-span-3 lg:mt-0" },
|
|
134
|
+
react_1.default.createElement("h2", { className: "sr-only" }, "Product information"),
|
|
135
|
+
react_1.default.createElement("p", { className: "text-3xl tracking-tight text-gray-900" }, product.price),
|
|
136
|
+
react_1.default.createElement("div", { className: "mt-6" },
|
|
137
|
+
react_1.default.createElement("h3", { className: "sr-only" }, "Reviews"),
|
|
138
|
+
react_1.default.createElement("div", { className: "flex items-center" },
|
|
139
|
+
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)(reviews.average > rating ? 'text-gray-900' : 'text-gray-200', 'size-5 shrink-0') })); })),
|
|
140
|
+
react_1.default.createElement("p", { className: "sr-only" },
|
|
141
|
+
reviews.average,
|
|
142
|
+
" out of 5 stars"),
|
|
143
|
+
react_1.default.createElement("a", { href: reviews.href, className: "ml-3 text-sm font-medium text-indigo-600 hover:text-indigo-500" },
|
|
144
|
+
reviews.totalCount,
|
|
145
|
+
" reviews"))),
|
|
146
|
+
react_1.default.createElement("form", { className: "mt-10" },
|
|
147
|
+
react_1.default.createElement("div", null,
|
|
148
|
+
react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" }, "Color"),
|
|
149
|
+
react_1.default.createElement("fieldset", { "aria-label": "Choose a color", className: "mt-4" },
|
|
150
|
+
react_1.default.createElement(react_2.RadioGroup, { value: selectedColor, onChange: setSelectedColor, className: "flex items-center gap-x-3" }, product.colors.map(function (color) { return (react_1.default.createElement(react_2.Radio, { key: color.name, value: color, "aria-label": color.name, className: (0, class_names_1.classNames)(color.selectedClass, 'relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-hidden data-checked:ring-2 data-focus:data-checked:ring-3 data-focus:data-checked:ring-offset-1') },
|
|
151
|
+
react_1.default.createElement("span", { "aria-hidden": "true", className: (0, class_names_1.classNames)(color.class, 'size-8 rounded-full border border-black/10') }))); })))),
|
|
152
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
153
|
+
react_1.default.createElement("div", { className: "flex items-center justify-between" },
|
|
154
|
+
react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" }, "Size"),
|
|
155
|
+
react_1.default.createElement("a", { href: "#", className: "text-sm font-medium text-indigo-600 hover:text-indigo-500" }, "Size guide")),
|
|
156
|
+
react_1.default.createElement("fieldset", { "aria-label": "Choose a size", className: "mt-4" },
|
|
157
|
+
react_1.default.createElement(react_2.RadioGroup, { value: selectedSize, onChange: setSelectedSize, className: "grid grid-cols-4 gap-4 sm:grid-cols-8 lg:grid-cols-4" }, product.sizes.map(function (size) { return (react_1.default.createElement(react_2.Radio, { key: size.name, value: size, disabled: !size.inStock, className: (0, class_names_1.classNames)(size.inStock
|
|
158
|
+
? 'cursor-pointer bg-white text-gray-900 shadow-xs'
|
|
159
|
+
: 'cursor-not-allowed bg-gray-50 text-gray-200', 'group relative flex items-center justify-center rounded-md border px-4 py-3 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-hidden data-focus:ring-2 data-focus:ring-indigo-500 sm:flex-1 sm:py-6') },
|
|
160
|
+
react_1.default.createElement("span", null, size.name),
|
|
161
|
+
size.inStock ? (react_1.default.createElement("span", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-px rounded-md border-2 border-transparent group-data-checked:border-indigo-500 group-data-focus:border" })) : (react_1.default.createElement("span", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-px rounded-md border-2 border-gray-200" },
|
|
162
|
+
react_1.default.createElement("svg", { stroke: "currentColor", viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 size-full stroke-2 text-gray-200" },
|
|
163
|
+
react_1.default.createElement("line", { x1: 0, x2: 100, y1: 100, y2: 0, vectorEffect: "non-scaling-stroke" })))))); })))),
|
|
164
|
+
react_1.default.createElement("button", { type: "submit", className: "mt-10 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden" }, "Add to bag"))),
|
|
165
|
+
react_1.default.createElement("div", { className: "py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pt-6 lg:pr-8 lg:pb-16" },
|
|
166
|
+
react_1.default.createElement("div", null,
|
|
167
|
+
react_1.default.createElement("h3", { className: "sr-only" }, "Description"),
|
|
168
|
+
react_1.default.createElement("div", { className: "space-y-6" },
|
|
169
|
+
react_1.default.createElement("p", { className: "text-base text-gray-900" }, product.description))),
|
|
170
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
171
|
+
react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" }, "Highlights"),
|
|
172
|
+
react_1.default.createElement("div", { className: "mt-4" },
|
|
173
|
+
react_1.default.createElement("ul", { role: "list", className: "list-disc space-y-2 pl-4 text-sm" }, product.highlights.map(function (highlight) { return (react_1.default.createElement("li", { key: highlight, className: "text-gray-400" },
|
|
174
|
+
react_1.default.createElement("span", { className: "text-gray-600" }, highlight))); })))),
|
|
175
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
176
|
+
react_1.default.createElement("h2", { className: "text-sm font-medium text-gray-900" }, "Details"),
|
|
177
|
+
react_1.default.createElement("div", { className: "mt-4 space-y-6" },
|
|
178
|
+
react_1.default.createElement("p", { className: "text-sm text-gray-600" }, product.details))))))));
|
|
179
|
+
};
|
|
180
|
+
exports.VistaProductOverviewV4 = VistaProductOverviewV4;
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.VistaProductOverviewV5 = void 0;
|
|
37
|
+
var react_1 = __importStar(require("react"));
|
|
38
|
+
var solid_1 = require("@heroicons/react/20/solid");
|
|
39
|
+
var react_2 = require("@headlessui/react");
|
|
40
|
+
var class_names_1 = require("../../utils/class-names");
|
|
41
|
+
var product = {
|
|
42
|
+
name: 'Application UI Icon Pack',
|
|
43
|
+
version: { name: '1.0', date: 'June 5, 2021', datetime: '2021-06-05' },
|
|
44
|
+
price: '$220',
|
|
45
|
+
description: 'The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.',
|
|
46
|
+
highlights: [
|
|
47
|
+
'200+ SVG icons in 3 unique styles',
|
|
48
|
+
'Compatible with Figma, Sketch, and Adobe XD',
|
|
49
|
+
'Drawn on 24 x 24 pixel grid',
|
|
50
|
+
],
|
|
51
|
+
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-05-product-01.jpg',
|
|
52
|
+
imageAlt: 'Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles.',
|
|
53
|
+
};
|
|
54
|
+
var reviews = {
|
|
55
|
+
average: 4,
|
|
56
|
+
featured: [
|
|
57
|
+
{
|
|
58
|
+
id: 1,
|
|
59
|
+
rating: 5,
|
|
60
|
+
content: "\n <p>This icon pack is just what I need for my latest project. There's an icon for just about anything I could ever need. Love the playful look!</p>\n ",
|
|
61
|
+
date: 'July 16, 2021',
|
|
62
|
+
datetime: '2021-07-16',
|
|
63
|
+
author: 'Emily Selman',
|
|
64
|
+
avatarSrc: 'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80',
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
id: 2,
|
|
68
|
+
rating: 5,
|
|
69
|
+
content: "\n <p>Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.</p>\n ",
|
|
70
|
+
date: 'July 12, 2021',
|
|
71
|
+
datetime: '2021-07-12',
|
|
72
|
+
author: 'Hector Gibbons',
|
|
73
|
+
avatarSrc: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80',
|
|
74
|
+
},
|
|
75
|
+
// More reviews...
|
|
76
|
+
],
|
|
77
|
+
};
|
|
78
|
+
var faqs = [
|
|
79
|
+
{
|
|
80
|
+
question: 'What format are these icons?',
|
|
81
|
+
answer: 'The icons are in SVG (Scalable Vector Graphic) format. They can be imported into your design tool of choice and used directly in code.',
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
question: 'Can I use the icons at different sizes?',
|
|
85
|
+
answer: "Yes. The icons are drawn on a 24 x 24 pixel grid, but the icons can be scaled to different sizes as needed. We don't recommend going smaller than 20 x 20 or larger than 64 x 64 to retain legibility and visual balance.",
|
|
86
|
+
},
|
|
87
|
+
// More FAQs...
|
|
88
|
+
];
|
|
89
|
+
var license = {
|
|
90
|
+
href: '#',
|
|
91
|
+
summary: 'For personal and professional use. You cannot resell or redistribute these icons in their original or modified state.',
|
|
92
|
+
content: "\n <h4>Overview</h4>\n \n <p>For personal and professional use. You cannot resell or redistribute these icons in their original or modified state.</p>\n \n <ul role=\"list\">\n <li>You're allowed to use the icons in unlimited projects.</li>\n <li>Attribution is not required to use the icons.</li>\n </ul>\n \n <h4>What you can do with it</h4>\n \n <ul role=\"list\">\n <li>Use them freely in your personal and professional work.</li>\n <li>Make them your own. Change the colors to suit your project or brand.</li>\n </ul>\n \n <h4>What you can't do with it</h4>\n \n <ul role=\"list\">\n <li>Don't be greedy. Selling or distributing these icons in their original or modified state is prohibited.</li>\n <li>Don't be evil. These icons cannot be used on websites or applications that promote illegal or immoral beliefs or activities.</li>\n </ul>\n ",
|
|
93
|
+
};
|
|
94
|
+
var VistaProductOverviewV5 = function () {
|
|
95
|
+
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
96
|
+
react_1.default.createElement("div", { className: "mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8" },
|
|
97
|
+
react_1.default.createElement("div", { className: "lg:grid lg:grid-cols-7 lg:grid-rows-1 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16" },
|
|
98
|
+
react_1.default.createElement("div", { className: "lg:col-span-4 lg:row-end-1" },
|
|
99
|
+
react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-4/3 w-full rounded-lg bg-gray-100 object-cover" })),
|
|
100
|
+
react_1.default.createElement("div", { className: "mx-auto mt-14 max-w-2xl sm:mt-16 lg:col-span-3 lg:row-span-2 lg:row-end-2 lg:mt-0 lg:max-w-none" },
|
|
101
|
+
react_1.default.createElement("div", { className: "flex flex-col-reverse" },
|
|
102
|
+
react_1.default.createElement("div", { className: "mt-4" },
|
|
103
|
+
react_1.default.createElement("h1", { className: "text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl" }, product.name),
|
|
104
|
+
react_1.default.createElement("h2", { id: "information-heading", className: "sr-only" }, "Product information"),
|
|
105
|
+
react_1.default.createElement("p", { className: "mt-2 text-sm text-gray-500" },
|
|
106
|
+
"Version ",
|
|
107
|
+
product.version.name,
|
|
108
|
+
" (Updated",
|
|
109
|
+
' ',
|
|
110
|
+
react_1.default.createElement("time", { dateTime: product.version.datetime }, product.version.date),
|
|
111
|
+
")")),
|
|
112
|
+
react_1.default.createElement("div", null,
|
|
113
|
+
react_1.default.createElement("h3", { className: "sr-only" }, "Reviews"),
|
|
114
|
+
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)(reviews.average > rating ? 'text-yellow-400' : 'text-gray-300', 'size-5 shrink-0') })); })),
|
|
115
|
+
react_1.default.createElement("p", { className: "sr-only" },
|
|
116
|
+
reviews.average,
|
|
117
|
+
" out of 5 stars"))),
|
|
118
|
+
react_1.default.createElement("p", { className: "mt-6 text-gray-500" }, product.description),
|
|
119
|
+
react_1.default.createElement("div", { className: "mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2" },
|
|
120
|
+
react_1.default.createElement("button", { type: "button", className: "flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden" },
|
|
121
|
+
"Pay ",
|
|
122
|
+
product.price),
|
|
123
|
+
react_1.default.createElement("button", { type: "button", className: "flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-50 px-8 py-3 text-base font-medium text-indigo-700 hover:bg-indigo-100 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden" }, "Preview")),
|
|
124
|
+
react_1.default.createElement("div", { className: "mt-10 border-t border-gray-200 pt-10" },
|
|
125
|
+
react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" }, "Highlights"),
|
|
126
|
+
react_1.default.createElement("div", { className: "mt-4" },
|
|
127
|
+
react_1.default.createElement("ul", { role: "list", className: "list-disc space-y-1 pl-5 text-sm/6 text-gray-500 marker:text-gray-300" }, product.highlights.map(function (highlight) { return (react_1.default.createElement("li", { key: highlight, className: "pl-2" }, highlight)); })))),
|
|
128
|
+
react_1.default.createElement("div", { className: "mt-10 border-t border-gray-200 pt-10" },
|
|
129
|
+
react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" }, "License"),
|
|
130
|
+
react_1.default.createElement("p", { className: "mt-4 text-sm text-gray-500" },
|
|
131
|
+
license.summary,
|
|
132
|
+
' ',
|
|
133
|
+
react_1.default.createElement("a", { href: license.href, className: "font-medium text-indigo-600 hover:text-indigo-500" }, "Read full license"))),
|
|
134
|
+
react_1.default.createElement("div", { className: "mt-10 border-t border-gray-200 pt-10" },
|
|
135
|
+
react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" }, "Share"),
|
|
136
|
+
react_1.default.createElement("ul", { role: "list", className: "mt-4 flex items-center space-x-6" },
|
|
137
|
+
react_1.default.createElement("li", null,
|
|
138
|
+
react_1.default.createElement("a", { href: "#", className: "flex size-6 items-center justify-center text-gray-400 hover:text-gray-500" },
|
|
139
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Share on Facebook"),
|
|
140
|
+
react_1.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", className: "size-5" },
|
|
141
|
+
react_1.default.createElement("path", { d: "M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z", clipRule: "evenodd", fillRule: "evenodd" })))),
|
|
142
|
+
react_1.default.createElement("li", null,
|
|
143
|
+
react_1.default.createElement("a", { href: "#", className: "flex size-6 items-center justify-center text-gray-400 hover:text-gray-500" },
|
|
144
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Share on Instagram"),
|
|
145
|
+
react_1.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", className: "size-6" },
|
|
146
|
+
react_1.default.createElement("path", { d: "M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z", clipRule: "evenodd", fillRule: "evenodd" })))),
|
|
147
|
+
react_1.default.createElement("li", null,
|
|
148
|
+
react_1.default.createElement("a", { href: "#", className: "flex size-6 items-center justify-center text-gray-400 hover:text-gray-500" },
|
|
149
|
+
react_1.default.createElement("span", { className: "sr-only" }, "Share on X"),
|
|
150
|
+
react_1.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", className: "size-5" },
|
|
151
|
+
react_1.default.createElement("path", { d: "M11.4678 8.77491L17.2961 2H15.915L10.8543 7.88256L6.81232 2H2.15039L8.26263 10.8955L2.15039 18H3.53159L8.87581 11.7878L13.1444 18H17.8063L11.4675 8.77491H11.4678ZM9.57608 10.9738L8.95678 10.0881L4.02925 3.03974H6.15068L10.1273 8.72795L10.7466 9.61374L15.9156 17.0075H13.7942L9.57608 10.9742V10.9738Z" }))))))),
|
|
152
|
+
react_1.default.createElement("div", { className: "mx-auto mt-16 w-full max-w-2xl lg:col-span-4 lg:mt-0 lg:max-w-none" },
|
|
153
|
+
react_1.default.createElement(react_2.TabGroup, null,
|
|
154
|
+
react_1.default.createElement("div", { className: "border-b border-gray-200" },
|
|
155
|
+
react_1.default.createElement(react_2.TabList, { className: "-mb-px flex space-x-8" },
|
|
156
|
+
react_1.default.createElement(react_2.Tab, { className: "border-b-2 border-transparent py-6 text-sm font-medium whitespace-nowrap text-gray-700 hover:border-gray-300 hover:text-gray-800 data-selected:border-indigo-600 data-selected:text-indigo-600" }, "Customer Reviews"),
|
|
157
|
+
react_1.default.createElement(react_2.Tab, { className: "border-b-2 border-transparent py-6 text-sm font-medium whitespace-nowrap text-gray-700 hover:border-gray-300 hover:text-gray-800 data-selected:border-indigo-600 data-selected:text-indigo-600" }, "FAQ"),
|
|
158
|
+
react_1.default.createElement(react_2.Tab, { className: "border-b-2 border-transparent py-6 text-sm font-medium whitespace-nowrap text-gray-700 hover:border-gray-300 hover:text-gray-800 data-selected:border-indigo-600 data-selected:text-indigo-600" }, "License"))),
|
|
159
|
+
react_1.default.createElement(react_2.TabPanels, { as: react_1.Fragment },
|
|
160
|
+
react_1.default.createElement(react_2.TabPanel, { className: "-mb-10" },
|
|
161
|
+
react_1.default.createElement("h3", { className: "sr-only" }, "Customer Reviews"),
|
|
162
|
+
reviews.featured.map(function (review, reviewIdx) { return (react_1.default.createElement("div", { key: review.id, className: "flex space-x-4 text-sm text-gray-500" },
|
|
163
|
+
react_1.default.createElement("div", { className: "flex-none py-10" },
|
|
164
|
+
react_1.default.createElement("img", { alt: "", src: review.avatarSrc, className: "size-10 rounded-full bg-gray-100" })),
|
|
165
|
+
react_1.default.createElement("div", { className: (0, class_names_1.classNames)(reviewIdx === 0 ? '' : 'border-t border-gray-200', 'py-10') },
|
|
166
|
+
react_1.default.createElement("h3", { className: "font-medium text-gray-900" }, review.author),
|
|
167
|
+
react_1.default.createElement("p", null,
|
|
168
|
+
react_1.default.createElement("time", { dateTime: review.datetime }, review.date)),
|
|
169
|
+
react_1.default.createElement("div", { className: "mt-4 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)(review.rating > rating ? 'text-yellow-400' : 'text-gray-300', 'size-5 shrink-0') })); })),
|
|
170
|
+
react_1.default.createElement("p", { className: "sr-only" },
|
|
171
|
+
review.rating,
|
|
172
|
+
" out of 5 stars"),
|
|
173
|
+
react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: review.content }, className: "mt-4 text-sm/6 text-gray-500" })))); })),
|
|
174
|
+
react_1.default.createElement(react_2.TabPanel, { className: "text-sm text-gray-500" },
|
|
175
|
+
react_1.default.createElement("h3", { className: "sr-only" }, "Frequently Asked Questions"),
|
|
176
|
+
react_1.default.createElement("dl", null, faqs.map(function (faq) { return (react_1.default.createElement(react_1.Fragment, { key: faq.question },
|
|
177
|
+
react_1.default.createElement("dt", { className: "mt-10 font-medium text-gray-900" }, faq.question),
|
|
178
|
+
react_1.default.createElement("dd", { className: "mt-2 text-sm/6 text-gray-500" },
|
|
179
|
+
react_1.default.createElement("p", null, faq.answer)))); }))),
|
|
180
|
+
react_1.default.createElement(react_2.TabPanel, { className: "pt-10" },
|
|
181
|
+
react_1.default.createElement("h3", { className: "sr-only" }, "License"),
|
|
182
|
+
react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: license.content }, className: "text-sm text-gray-500 [&_h4]:mt-5 [&_h4]:font-medium [&_h4]:text-gray-900 [&_li]:pl-2 [&_li::marker]:text-gray-300 [&_p]:my-2 [&_p]:text-sm/6 [&_ul]:my-4 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5 [&_ul]:text-sm/6 [&>:first-child]:mt-0" })))))))));
|
|
183
|
+
};
|
|
184
|
+
exports.VistaProductOverviewV5 = VistaProductOverviewV5;
|
package/package.json
CHANGED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface VistaProductOverviewV1Props {
|
|
2
|
+
id: string;
|
|
3
|
+
}
|
|
4
|
+
export interface VistaProductOverviewV2Props {
|
|
5
|
+
id: string;
|
|
6
|
+
}
|
|
7
|
+
export interface VistaProductOverviewV3Props {
|
|
8
|
+
id: string;
|
|
9
|
+
}
|
|
10
|
+
export interface VistaProductOverviewV4Props {
|
|
11
|
+
id: string;
|
|
12
|
+
}
|
|
13
|
+
export interface VistaProductOverviewV5Props {
|
|
14
|
+
id: string;
|
|
15
|
+
}
|
package/utils/form-schema.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ import { VistaRadioV1Props } from "../type/vista-radio-type";
|
|
|
9
9
|
import { VistaButtonV1Props } from "../type/vista-button-type";
|
|
10
10
|
import { VistaUploadV1Props } from "../type/vista-upload-type";
|
|
11
11
|
export declare enum VISTA_FORM_ELEMENTS {
|
|
12
|
+
AUDIO_V1 = "AUDIO_V1",
|
|
12
13
|
BUTTON_V1 = "BUTTON_V1",
|
|
13
14
|
CHECKBOX_V1 = "CHECKBOX_V1",
|
|
14
15
|
CHECKBOX_V2 = "CHECKBOX_V2",
|
|
@@ -22,6 +23,7 @@ export declare enum VISTA_FORM_ELEMENTS {
|
|
|
22
23
|
UPLOAD_V1 = "UPLOAD_V1"
|
|
23
24
|
}
|
|
24
25
|
export declare const formSchema: {
|
|
26
|
+
AUDIO_V1: (props: any) => React.JSX.Element;
|
|
25
27
|
BUTTON_V1: (props: VistaButtonV1Props) => React.JSX.Element;
|
|
26
28
|
CHECKBOX_V1: (props: VistaCheckboxV1Props) => React.JSX.Element;
|
|
27
29
|
CHECKBOX_V2: (props: VistaCheckboxV2Props) => React.JSX.Element;
|
package/utils/form-schema.js
CHANGED
|
@@ -30,6 +30,7 @@ var vista_button_v1_1 = require("../molecules/vista-button-v1/vista-button-v1");
|
|
|
30
30
|
var vista_upload_v1_1 = require("../molecules/vista-upload-v1/vista-upload-v1");
|
|
31
31
|
var VISTA_FORM_ELEMENTS;
|
|
32
32
|
(function (VISTA_FORM_ELEMENTS) {
|
|
33
|
+
VISTA_FORM_ELEMENTS["AUDIO_V1"] = "AUDIO_V1";
|
|
33
34
|
VISTA_FORM_ELEMENTS["BUTTON_V1"] = "BUTTON_V1";
|
|
34
35
|
VISTA_FORM_ELEMENTS["CHECKBOX_V1"] = "CHECKBOX_V1";
|
|
35
36
|
VISTA_FORM_ELEMENTS["CHECKBOX_V2"] = "CHECKBOX_V2";
|
|
@@ -43,6 +44,7 @@ var VISTA_FORM_ELEMENTS;
|
|
|
43
44
|
VISTA_FORM_ELEMENTS["UPLOAD_V1"] = "UPLOAD_V1";
|
|
44
45
|
})(VISTA_FORM_ELEMENTS || (exports.VISTA_FORM_ELEMENTS = VISTA_FORM_ELEMENTS = {}));
|
|
45
46
|
exports.formSchema = (_a = {},
|
|
47
|
+
_a[VISTA_FORM_ELEMENTS.AUDIO_V1] = function (props) { return react_1.default.createElement("audio", __assign({}, props)); },
|
|
46
48
|
_a[VISTA_FORM_ELEMENTS.BUTTON_V1] = function (props) { return react_1.default.createElement(vista_button_v1_1.VistaButtonV1, __assign({}, props)); },
|
|
47
49
|
_a[VISTA_FORM_ELEMENTS.CHECKBOX_V1] = function (props) { return react_1.default.createElement(vista_checkbox_v1_1.VistaCheckboxV1, __assign({}, props)); },
|
|
48
50
|
_a[VISTA_FORM_ELEMENTS.CHECKBOX_V2] = function (props) { return react_1.default.createElement(vista_checkbox_v2_1.VistaCheckboxV2, __assign({}, props)); },
|