@appcorp/app-corp-vista 0.2.15 → 0.2.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.
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { VistaProductListV5Props } from '../../type/vista-product-list-type';
|
|
3
|
+
export declare const VistaProductListV5: FC<VistaProductListV5Props>;
|
|
@@ -5,63 +5,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.VistaProductListV5 = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
id: 1,
|
|
11
|
-
name: 'Zip Tote Basket',
|
|
12
|
-
color: 'White and black',
|
|
13
|
-
href: '#',
|
|
14
|
-
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
|
|
15
|
-
imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
|
|
16
|
-
price: '$140',
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
id: 2,
|
|
20
|
-
name: 'Zip Tote Basket',
|
|
21
|
-
color: 'White and black',
|
|
22
|
-
href: '#',
|
|
23
|
-
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
|
|
24
|
-
imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
|
|
25
|
-
price: '$140',
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
id: 3,
|
|
29
|
-
name: 'Zip Tote Basket',
|
|
30
|
-
color: 'White and black',
|
|
31
|
-
href: '#',
|
|
32
|
-
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
|
|
33
|
-
imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
|
|
34
|
-
price: '$140',
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
id: 4,
|
|
38
|
-
name: 'Zip Tote Basket',
|
|
39
|
-
color: 'White and black',
|
|
40
|
-
href: '#',
|
|
41
|
-
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
|
|
42
|
-
imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
|
|
43
|
-
price: '$140',
|
|
44
|
-
},
|
|
45
|
-
];
|
|
46
|
-
var VistaProductListV5 = function () {
|
|
8
|
+
var VistaProductListV5 = function (_a) {
|
|
9
|
+
var title = _a.title, items = _a.items;
|
|
47
10
|
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
48
|
-
react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-
|
|
49
|
-
react_1.default.createElement("h2", { className: "text-xl font-bold text-gray-900" },
|
|
50
|
-
react_1.default.createElement("div", { className: "mt-8 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8" },
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
"
|
|
63
|
-
|
|
64
|
-
", ",
|
|
65
|
-
|
|
11
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-20 lg:max-w-7xl lg:px-8" },
|
|
12
|
+
react_1.default.createElement("h2", { className: "text-xl font-bold text-gray-900" }, title),
|
|
13
|
+
react_1.default.createElement("div", { className: "mt-8 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8" }, items
|
|
14
|
+
.filter(function (_a) {
|
|
15
|
+
var enabled = _a.enabled;
|
|
16
|
+
return enabled;
|
|
17
|
+
})
|
|
18
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
19
|
+
.map(function (_a) {
|
|
20
|
+
var id = _a.id, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, name = _a.name, color = _a.color, price = _a.price, href = _a.href;
|
|
21
|
+
return (react_1.default.createElement("div", { key: id },
|
|
22
|
+
react_1.default.createElement("div", { className: "relative" },
|
|
23
|
+
react_1.default.createElement("div", { className: "relative h-72 w-full overflow-hidden rounded-lg" },
|
|
24
|
+
react_1.default.createElement("img", { alt: imageAlt, src: imageSrc, className: "size-full object-cover" })),
|
|
25
|
+
react_1.default.createElement("div", { className: "relative mt-4" },
|
|
26
|
+
react_1.default.createElement("h3", { className: "text-sm font-medium text-primary" }, name),
|
|
27
|
+
color && (react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, color))),
|
|
28
|
+
react_1.default.createElement("div", { className: "absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4" },
|
|
29
|
+
react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 bottom-0 h-48 bg-linear-to-t from-primary opacity-50" }),
|
|
30
|
+
price && (react_1.default.createElement("p", { className: "relative text-lg font-semibold text-white" }, price)))),
|
|
31
|
+
react_1.default.createElement("div", { className: "mt-6" },
|
|
32
|
+
react_1.default.createElement("a", { href: href, className: "relative flex items-center justify-center rounded-md border border-transparent bg-primary/30 px-8 py-2 text-sm font-medium text-gray-900 hover:bg-primary/40" },
|
|
33
|
+
"Add to bag",
|
|
34
|
+
react_1.default.createElement("span", { className: "sr-only" },
|
|
35
|
+
", ",
|
|
36
|
+
name)))));
|
|
37
|
+
})))));
|
|
66
38
|
};
|
|
67
39
|
exports.VistaProductListV5 = VistaProductListV5;
|
|
@@ -8,11 +8,11 @@ var react_1 = __importDefault(require("react"));
|
|
|
8
8
|
var VistaPromoSectionV4 = function (_a) {
|
|
9
9
|
var bannerAlt = _a.bannerAlt, bannerSrc = _a.bannerSrc, buttonLabel = _a.buttonLabel, descriptions = _a.descriptions, title = _a.title;
|
|
10
10
|
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
11
|
-
react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-
|
|
11
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8" },
|
|
12
12
|
react_1.default.createElement("div", { className: "relative overflow-hidden rounded-lg" },
|
|
13
13
|
react_1.default.createElement("div", { className: "absolute inset-0" },
|
|
14
14
|
react_1.default.createElement("img", { alt: bannerAlt, className: "size-full object-cover", src: bannerSrc })),
|
|
15
|
-
react_1.default.createElement("div", { className: "relative bg-
|
|
15
|
+
react_1.default.createElement("div", { className: "relative bg-primary/60 px-6 py-32 sm:px-12 sm:py-40 lg:px-16" },
|
|
16
16
|
react_1.default.createElement("div", { className: "relative mx-auto flex max-w-3xl flex-col items-center text-center" },
|
|
17
17
|
react_1.default.createElement("h2", { className: "text-3xl font-bold tracking-tight text-white sm:text-4xl" }, title),
|
|
18
18
|
descriptions.map(function (text, ind) { return (react_1.default.createElement("p", { key: ind, className: "mt-3 text-xl text-white" }, text)); }),
|
package/package.json
CHANGED
|
@@ -10,8 +10,20 @@ export interface VistaProductListV3Props {
|
|
|
10
10
|
export interface VistaProductListV4Props {
|
|
11
11
|
id: string;
|
|
12
12
|
}
|
|
13
|
-
export interface
|
|
13
|
+
export interface VistaProductListV5Item {
|
|
14
|
+
color?: string;
|
|
15
|
+
enabled: boolean;
|
|
16
|
+
href: string;
|
|
14
17
|
id: string;
|
|
18
|
+
imageAlt: string;
|
|
19
|
+
imageSrc: string;
|
|
20
|
+
name: string;
|
|
21
|
+
order: number;
|
|
22
|
+
price?: string;
|
|
23
|
+
}
|
|
24
|
+
export interface VistaProductListV5Props {
|
|
25
|
+
title: string;
|
|
26
|
+
items: VistaProductListV5Item[];
|
|
15
27
|
}
|
|
16
28
|
export interface VistaProductListV6Props {
|
|
17
29
|
id: string;
|