@appcorp/app-corp-vista 0.1.93 → 0.1.94

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.
Files changed (25) hide show
  1. package/organisms/vista-product-list-v1/vista-product-list-v1.d.ts +2 -0
  2. package/organisms/vista-product-list-v1/vista-product-list-v1.js +60 -0
  3. package/organisms/vista-product-list-v10/vista-product-list-v10.d.ts +2 -0
  4. package/organisms/vista-product-list-v10/vista-product-list-v10.js +67 -0
  5. package/organisms/vista-product-list-v11/vista-product-list-v11.d.ts +2 -0
  6. package/organisms/vista-product-list-v11/vista-product-list-v11.js +56 -0
  7. package/organisms/vista-product-list-v2/vista-product-list-v2.d.ts +2 -0
  8. package/organisms/vista-product-list-v2/vista-product-list-v2.js +67 -0
  9. package/organisms/vista-product-list-v3/vista-product-list-v3.d.ts +2 -0
  10. package/organisms/vista-product-list-v3/vista-product-list-v3.js +94 -0
  11. package/organisms/vista-product-list-v4/vista-product-list-v4.d.ts +2 -0
  12. package/organisms/vista-product-list-v4/vista-product-list-v4.js +48 -0
  13. package/organisms/vista-product-list-v5/vista-product-list-v5.d.ts +2 -0
  14. package/organisms/vista-product-list-v5/vista-product-list-v5.js +67 -0
  15. package/organisms/vista-product-list-v6/vista-product-list-v6.d.ts +2 -0
  16. package/organisms/vista-product-list-v6/vista-product-list-v6.js +51 -0
  17. package/organisms/vista-product-list-v7/vista-product-list-v7.d.ts +2 -0
  18. package/organisms/vista-product-list-v7/vista-product-list-v7.js +54 -0
  19. package/organisms/vista-product-list-v8/vista-product-list-v8.d.ts +2 -0
  20. package/organisms/vista-product-list-v8/vista-product-list-v8.js +73 -0
  21. package/organisms/vista-product-list-v9/vista-product-list-v9.d.ts +2 -0
  22. package/organisms/vista-product-list-v9/vista-product-list-v9.js +46 -0
  23. package/package.json +1 -1
  24. package/type/vista-product-list-type.d.ts +33 -0
  25. package/type/vista-product-list-type.js +2 -0
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV1: () => React.JSX.Element;
@@ -0,0 +1,60 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV1 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
9
+ {
10
+ id: 1,
11
+ name: 'Basic Tee',
12
+ href: '#',
13
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-related-product-01.jpg',
14
+ imageAlt: "Front of men's Basic Tee in black.",
15
+ price: '$35',
16
+ color: 'Black',
17
+ },
18
+ {
19
+ id: 1,
20
+ name: 'Basic Tee',
21
+ href: '#',
22
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-related-product-01.jpg',
23
+ imageAlt: "Front of men's Basic Tee in black.",
24
+ price: '$35',
25
+ color: 'Black',
26
+ },
27
+ {
28
+ id: 1,
29
+ name: 'Basic Tee',
30
+ href: '#',
31
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-related-product-01.jpg',
32
+ imageAlt: "Front of men's Basic Tee in black.",
33
+ price: '$35',
34
+ color: 'Black',
35
+ }, {
36
+ id: 1,
37
+ name: 'Basic Tee',
38
+ href: '#',
39
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-related-product-01.jpg',
40
+ imageAlt: "Front of men's Basic Tee in black.",
41
+ price: '$35',
42
+ color: 'Black',
43
+ },
44
+ ];
45
+ var VistaProductListV1 = function () {
46
+ return (react_1.default.createElement("div", { className: "bg-white" },
47
+ 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" },
48
+ react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Customers also purchased"),
49
+ react_1.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8" }, products.map(function (product) { return (react_1.default.createElement("div", { key: product.id, className: "group relative" },
50
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-square w-full rounded-md bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80" }),
51
+ react_1.default.createElement("div", { className: "mt-4 flex justify-between" },
52
+ react_1.default.createElement("div", null,
53
+ react_1.default.createElement("h3", { className: "text-sm text-gray-700" },
54
+ react_1.default.createElement("a", { href: product.href },
55
+ react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" }),
56
+ product.name)),
57
+ react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, product.color)),
58
+ react_1.default.createElement("p", { className: "text-sm font-medium text-gray-900" }, product.price)))); })))));
59
+ };
60
+ exports.VistaProductListV1 = VistaProductListV1;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV10: () => React.JSX.Element;
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV10 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
9
+ {
10
+ id: 1,
11
+ name: 'Fusion',
12
+ category: 'UI Kit',
13
+ href: '#',
14
+ price: '$49',
15
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-05-related-product-01.jpg',
16
+ imageAlt: 'Payment application dashboard screenshot with transaction table, financial highlights, and main clients on colorful purple background.',
17
+ },
18
+ {
19
+ id: 2,
20
+ name: 'Fusion',
21
+ category: 'UI Kit',
22
+ href: '#',
23
+ price: '$49',
24
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-05-related-product-01.jpg',
25
+ imageAlt: 'Payment application dashboard screenshot with transaction table, financial highlights, and main clients on colorful purple background.',
26
+ },
27
+ {
28
+ id: 3,
29
+ name: 'Fusion',
30
+ category: 'UI Kit',
31
+ href: '#',
32
+ price: '$49',
33
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-05-related-product-01.jpg',
34
+ imageAlt: 'Payment application dashboard screenshot with transaction table, financial highlights, and main clients on colorful purple background.',
35
+ },
36
+ {
37
+ id: 4,
38
+ name: 'Fusion',
39
+ category: 'UI Kit',
40
+ href: '#',
41
+ price: '$49',
42
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-05-related-product-01.jpg',
43
+ imageAlt: 'Payment application dashboard screenshot with transaction table, financial highlights, and main clients on colorful purple background.',
44
+ }
45
+ ];
46
+ var VistaProductListV10 = function () {
47
+ 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-24 lg:max-w-7xl lg:px-8" },
49
+ react_1.default.createElement("div", { className: "flex items-center justify-between space-x-4" },
50
+ react_1.default.createElement("h2", { className: "text-lg font-medium text-gray-900" }, "Customers also viewed"),
51
+ react_1.default.createElement("a", { href: "#", className: "text-sm font-medium whitespace-nowrap text-indigo-600 hover:text-indigo-500" },
52
+ "View all",
53
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))),
54
+ react_1.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-x-8 gap-y-8 sm:grid-cols-2 sm:gap-y-10 lg:grid-cols-4" }, products.map(function (product) { return (react_1.default.createElement("div", { key: product.id, className: "group relative" },
55
+ react_1.default.createElement("div", { className: "relative" },
56
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-4/3 w-full rounded-lg bg-gray-100 object-cover" }),
57
+ react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-end p-4 opacity-0 group-hover:opacity-100" },
58
+ react_1.default.createElement("div", { className: "w-full rounded-md bg-white/75 px-4 py-2 text-center text-sm font-medium text-gray-900 backdrop-blur-sm backdrop-filter" }, "View Product"))),
59
+ react_1.default.createElement("div", { className: "mt-4 flex items-center justify-between space-x-8 text-base font-medium text-gray-900" },
60
+ react_1.default.createElement("h3", null,
61
+ react_1.default.createElement("a", { href: "#" },
62
+ react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" }),
63
+ product.name)),
64
+ react_1.default.createElement("p", null, product.price)),
65
+ react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, product.category))); })))));
66
+ };
67
+ exports.VistaProductListV10 = VistaProductListV10;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV11: () => React.JSX.Element;
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV11 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
9
+ {
10
+ id: 1,
11
+ name: 'Basic Tee 8-Pack',
12
+ href: '#',
13
+ price: '$256',
14
+ description: 'Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.',
15
+ options: '8 colors',
16
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-02-image-card-01.jpg',
17
+ imageAlt: 'Eight shirts arranged on table in black, olive, grey, blue, white, red, mustard, and green.',
18
+ },
19
+ {
20
+ id: 2,
21
+ name: 'Basic Tee',
22
+ href: '#',
23
+ price: '$32',
24
+ description: 'Look like a visionary CEO and wear the same black t-shirt every day.',
25
+ options: 'Black',
26
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-02-image-card-02.jpg',
27
+ imageAlt: 'Front of plain black t-shirt.',
28
+ },
29
+ {
30
+ id: 3,
31
+ name: 'Basic Tee',
32
+ href: '#',
33
+ price: '$32',
34
+ description: 'Look like a visionary CEO and wear the same black t-shirt every day.',
35
+ options: 'Black',
36
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-02-image-card-02.jpg',
37
+ imageAlt: 'Front of plain black t-shirt.',
38
+ },
39
+ ];
40
+ var VistaProductListV11 = function () {
41
+ return (react_1.default.createElement("div", { className: "bg-white" },
42
+ 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" },
43
+ react_1.default.createElement("h2", { className: "sr-only" }, "Products"),
44
+ react_1.default.createElement("div", { className: "grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:grid-cols-3 lg:gap-x-8" }, products.map(function (product) { return (react_1.default.createElement("div", { key: product.id, className: "group relative flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white" },
45
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-3/4 w-full bg-gray-200 object-cover group-hover:opacity-75 sm:aspect-auto sm:h-96" }),
46
+ react_1.default.createElement("div", { className: "flex flex-1 flex-col space-y-2 p-4" },
47
+ react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" },
48
+ react_1.default.createElement("a", { href: product.href },
49
+ react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" }),
50
+ product.name)),
51
+ react_1.default.createElement("p", { className: "text-sm text-gray-500" }, product.description),
52
+ react_1.default.createElement("div", { className: "flex flex-1 flex-col justify-end" },
53
+ react_1.default.createElement("p", { className: "text-sm text-gray-500 italic" }, product.options),
54
+ react_1.default.createElement("p", { className: "text-base font-medium text-gray-900" }, product.price))))); })))));
55
+ };
56
+ exports.VistaProductListV11 = VistaProductListV11;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV2: () => React.JSX.Element;
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV2 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
9
+ {
10
+ id: 1,
11
+ name: 'Basic Tee',
12
+ href: '#',
13
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-related-product-01.jpg',
14
+ imageAlt: "Front of men's Basic Tee in black.",
15
+ price: '$35',
16
+ color: 'Black',
17
+ },
18
+ {
19
+ id: 1,
20
+ name: 'Basic Tee',
21
+ href: '#',
22
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-related-product-01.jpg',
23
+ imageAlt: "Front of men's Basic Tee in black.",
24
+ price: '$35',
25
+ color: 'Black',
26
+ },
27
+ {
28
+ id: 1,
29
+ name: 'Basic Tee',
30
+ href: '#',
31
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-related-product-01.jpg',
32
+ imageAlt: "Front of men's Basic Tee in black.",
33
+ price: '$35',
34
+ color: 'Black',
35
+ }, {
36
+ id: 1,
37
+ name: 'Basic Tee',
38
+ href: '#',
39
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-01-related-product-01.jpg',
40
+ imageAlt: "Front of men's Basic Tee in black.",
41
+ price: '$35',
42
+ color: 'Black',
43
+ },
44
+ ];
45
+ var VistaProductListV2 = function () {
46
+ return (react_1.default.createElement("div", { className: "bg-white" },
47
+ 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" },
48
+ react_1.default.createElement("div", { className: "md:flex md:items-center md:justify-between" },
49
+ react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Trending products"),
50
+ react_1.default.createElement("a", { href: "#", className: "hidden text-sm font-medium text-indigo-600 hover:text-indigo-500 md:block" },
51
+ "Shop the collection",
52
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))),
53
+ react_1.default.createElement("div", { className: "mt-6 grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 md:grid-cols-4 md:gap-y-0 lg:gap-x-8" }, products.map(function (product) { return (react_1.default.createElement("div", { key: product.id, className: "group relative" },
54
+ react_1.default.createElement("div", { className: "h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80" },
55
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "size-full object-cover" })),
56
+ react_1.default.createElement("h3", { className: "mt-4 text-sm text-gray-700" },
57
+ react_1.default.createElement("a", { href: product.href },
58
+ react_1.default.createElement("span", { className: "absolute inset-0" }),
59
+ product.name)),
60
+ react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, product.color),
61
+ react_1.default.createElement("p", { className: "mt-1 text-sm font-medium text-gray-900" }, product.price))); })),
62
+ react_1.default.createElement("div", { className: "mt-8 text-sm md:hidden" },
63
+ react_1.default.createElement("a", { href: "#", className: "font-medium text-indigo-600 hover:text-indigo-500" },
64
+ "Shop the collection",
65
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))))));
66
+ };
67
+ exports.VistaProductListV2 = VistaProductListV2;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV3: () => React.JSX.Element;
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV3 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
9
+ {
10
+ id: 1,
11
+ name: 'Machined Pen',
12
+ color: 'Black',
13
+ price: '$35',
14
+ href: '#',
15
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-product-01.jpg',
16
+ imageAlt: 'Black machined steel pen with hexagonal grip and small white logo at top.',
17
+ availableColors: [
18
+ { name: 'Black', colorBg: '#111827' },
19
+ { name: 'Brass', colorBg: '#FDE68A' },
20
+ { name: 'Chrome', colorBg: '#E5E7EB' },
21
+ ],
22
+ },
23
+ {
24
+ id: 1,
25
+ name: 'Machined Pen',
26
+ color: 'Black',
27
+ price: '$35',
28
+ href: '#',
29
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-product-01.jpg',
30
+ imageAlt: 'Black machined steel pen with hexagonal grip and small white logo at top.',
31
+ availableColors: [
32
+ { name: 'Black', colorBg: '#111827' },
33
+ { name: 'Brass', colorBg: '#FDE68A' },
34
+ { name: 'Chrome', colorBg: '#E5E7EB' },
35
+ ],
36
+ },
37
+ {
38
+ id: 1,
39
+ name: 'Machined Pen',
40
+ color: 'Black',
41
+ price: '$35',
42
+ href: '#',
43
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-product-01.jpg',
44
+ imageAlt: 'Black machined steel pen with hexagonal grip and small white logo at top.',
45
+ availableColors: [
46
+ { name: 'Black', colorBg: '#111827' },
47
+ { name: 'Brass', colorBg: '#FDE68A' },
48
+ { name: 'Chrome', colorBg: '#E5E7EB' },
49
+ ],
50
+ },
51
+ {
52
+ id: 1,
53
+ name: 'Machined Pen',
54
+ color: 'Black',
55
+ price: '$35',
56
+ href: '#',
57
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-product-01.jpg',
58
+ imageAlt: 'Black machined steel pen with hexagonal grip and small white logo at top.',
59
+ availableColors: [
60
+ { name: 'Black', colorBg: '#111827' },
61
+ { name: 'Brass', colorBg: '#FDE68A' },
62
+ { name: 'Chrome', colorBg: '#E5E7EB' },
63
+ ],
64
+ },
65
+ ];
66
+ var VistaProductListV3 = function () {
67
+ return (react_1.default.createElement("div", { className: "bg-white" },
68
+ react_1.default.createElement("div", { className: "py-16 sm:py-24 lg:mx-auto lg:max-w-7xl lg:px-8" },
69
+ react_1.default.createElement("div", { className: "flex items-center justify-between px-4 sm:px-6 lg:px-0" },
70
+ react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Trending products"),
71
+ react_1.default.createElement("a", { href: "#", className: "hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block" },
72
+ "See everything",
73
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))),
74
+ react_1.default.createElement("div", { className: "relative mt-8" },
75
+ react_1.default.createElement("div", { className: "relative -mb-6 w-full overflow-x-auto pb-6" },
76
+ react_1.default.createElement("ul", { role: "list", className: "mx-4 inline-flex space-x-8 sm:mx-6 lg:mx-0 lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-x-0" }, products.map(function (product) { return (react_1.default.createElement("li", { key: product.id, className: "inline-flex w-64 flex-col text-center lg:w-auto" },
77
+ react_1.default.createElement("div", { className: "group relative" },
78
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-square w-full rounded-md bg-gray-200 object-cover group-hover:opacity-75" }),
79
+ react_1.default.createElement("div", { className: "mt-6" },
80
+ react_1.default.createElement("p", { className: "text-sm text-gray-500" }, product.color),
81
+ react_1.default.createElement("h3", { className: "mt-1 font-semibold text-gray-900" },
82
+ react_1.default.createElement("a", { href: product.href },
83
+ react_1.default.createElement("span", { className: "absolute inset-0" }),
84
+ product.name)),
85
+ react_1.default.createElement("p", { className: "mt-1 text-gray-900" }, product.price))),
86
+ react_1.default.createElement("h4", { className: "sr-only" }, "Available colors"),
87
+ react_1.default.createElement("ul", { role: "list", className: "mt-auto flex items-center justify-center space-x-3 pt-6" }, product.availableColors.map(function (color) { return (react_1.default.createElement("li", { key: color.name, style: { backgroundColor: color.colorBg }, className: "size-4 rounded-full border border-black/10" },
88
+ react_1.default.createElement("span", { className: "sr-only" }, color.name))); })))); })))),
89
+ react_1.default.createElement("div", { className: "mt-12 flex px-4 sm:hidden" },
90
+ react_1.default.createElement("a", { href: "#", className: "text-sm font-semibold text-indigo-600 hover:text-indigo-500" },
91
+ "See everything",
92
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))))));
93
+ };
94
+ exports.VistaProductListV3 = VistaProductListV3;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV4: () => React.JSX.Element;
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV4 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
9
+ {
10
+ id: 1,
11
+ name: 'Focus Paper Refill',
12
+ href: '#',
13
+ price: '$13',
14
+ description: '3 sizes available',
15
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-01-image-card-01.jpg',
16
+ imageAlt: 'Person using a pen to cross a task off a productivity paper card.',
17
+ },
18
+ {
19
+ id: 2,
20
+ name: 'Focus Card Holder',
21
+ href: '#',
22
+ price: '$64',
23
+ description: 'Walnut',
24
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-01-image-card-02.jpg',
25
+ imageAlt: 'Paper card sitting upright in walnut card holder on desk.',
26
+ },
27
+ {
28
+ id: 3,
29
+ name: 'Focus Carry Case',
30
+ href: '#',
31
+ price: '$32',
32
+ description: 'Heather Gray',
33
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-01-image-card-03.jpg',
34
+ imageAlt: 'Textured gray felt pouch for paper cards with snap button flap and elastic pen holder loop.',
35
+ },
36
+ ];
37
+ var VistaProductListV4 = function () {
38
+ return (react_1.default.createElement("div", { className: "bg-white" },
39
+ 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" },
40
+ react_1.default.createElement("h2", { id: "products-heading", className: "sr-only" }, "Products"),
41
+ react_1.default.createElement("div", { className: "grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8" }, products.map(function (product) { return (react_1.default.createElement("a", { key: product.id, href: product.href, className: "group" },
42
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-square w-full overflow-hidden rounded-lg object-cover group-hover:opacity-75 sm:aspect-2/3" }),
43
+ react_1.default.createElement("div", { className: "mt-4 flex items-center justify-between text-base font-medium text-gray-900" },
44
+ react_1.default.createElement("h3", null, product.name),
45
+ react_1.default.createElement("p", null, product.price)),
46
+ react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 italic" }, product.description))); })))));
47
+ };
48
+ exports.VistaProductListV4 = VistaProductListV4;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV5: () => React.JSX.Element;
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV5 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
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 () {
47
+ 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-24 lg:max-w-7xl lg:px-8" },
49
+ react_1.default.createElement("h2", { className: "text-xl font-bold text-gray-900" }, "Customers also bought"),
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" }, products.map(function (product) { return (react_1.default.createElement("div", { key: product.id },
51
+ react_1.default.createElement("div", { className: "relative" },
52
+ react_1.default.createElement("div", { className: "relative h-72 w-full overflow-hidden rounded-lg" },
53
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "size-full object-cover" })),
54
+ react_1.default.createElement("div", { className: "relative mt-4" },
55
+ react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" }, product.name),
56
+ react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, product.color)),
57
+ 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" },
58
+ react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 bottom-0 h-36 bg-linear-to-t from-black opacity-50" }),
59
+ react_1.default.createElement("p", { className: "relative text-lg font-semibold text-white" }, product.price))),
60
+ react_1.default.createElement("div", { className: "mt-6" },
61
+ react_1.default.createElement("a", { href: product.href, className: "relative flex items-center justify-center rounded-md border border-transparent bg-gray-100 px-8 py-2 text-sm font-medium text-gray-900 hover:bg-gray-200" },
62
+ "Add to bag",
63
+ react_1.default.createElement("span", { className: "sr-only" },
64
+ ", ",
65
+ product.name))))); })))));
66
+ };
67
+ exports.VistaProductListV5 = VistaProductListV5;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV6: () => React.JSX.Element;
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV6 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
9
+ {
10
+ id: 1,
11
+ name: 'Earthen Bottle',
12
+ href: '#',
13
+ price: '$48',
14
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-04-image-card-01.jpg',
15
+ imageAlt: 'Tall slender porcelain bottle with natural clay textured body and cork stopper.',
16
+ },
17
+ {
18
+ id: 2,
19
+ name: 'Earthen Bottle',
20
+ href: '#',
21
+ price: '$48',
22
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-04-image-card-01.jpg',
23
+ imageAlt: 'Tall slender porcelain bottle with natural clay textured body and cork stopper.',
24
+ },
25
+ {
26
+ id: 3,
27
+ name: 'Earthen Bottle',
28
+ href: '#',
29
+ price: '$48',
30
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-04-image-card-01.jpg',
31
+ imageAlt: 'Tall slender porcelain bottle with natural clay textured body and cork stopper.',
32
+ },
33
+ {
34
+ id: 4,
35
+ name: 'Earthen Bottle',
36
+ href: '#',
37
+ price: '$48',
38
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-04-image-card-01.jpg',
39
+ imageAlt: 'Tall slender porcelain bottle with natural clay textured body and cork stopper.',
40
+ },
41
+ ];
42
+ var VistaProductListV6 = function () {
43
+ return (react_1.default.createElement("div", { className: "bg-white" },
44
+ 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" },
45
+ react_1.default.createElement("h2", { className: "sr-only" }, "Products"),
46
+ react_1.default.createElement("div", { className: "grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8" }, products.map(function (product) { return (react_1.default.createElement("a", { key: product.id, href: product.href, className: "group" },
47
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-7/8" }),
48
+ react_1.default.createElement("h3", { className: "mt-4 text-sm text-gray-700" }, product.name),
49
+ react_1.default.createElement("p", { className: "mt-1 text-lg font-medium text-gray-900" }, product.price))); })))));
50
+ };
51
+ exports.VistaProductListV6 = VistaProductListV6;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV7: () => React.JSX.Element;
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV7 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
9
+ {
10
+ id: 1,
11
+ name: 'Black Basic Tee',
12
+ price: '$32',
13
+ href: '#',
14
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-favorite-01.jpg',
15
+ imageAlt: "Model wearing women's black cotton crewneck tee.",
16
+ },
17
+ {
18
+ id: 2,
19
+ name: 'Black Basic Tee',
20
+ price: '$32',
21
+ href: '#',
22
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-favorite-01.jpg',
23
+ imageAlt: "Model wearing women's black cotton crewneck tee.",
24
+ },
25
+ {
26
+ id: 3,
27
+ name: 'Black Basic Tee',
28
+ price: '$32',
29
+ href: '#',
30
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-favorite-01.jpg',
31
+ imageAlt: "Model wearing women's black cotton crewneck tee.",
32
+ },
33
+ ];
34
+ var VistaProductListV7 = function () {
35
+ return (react_1.default.createElement("div", { className: "bg-white" },
36
+ react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8" },
37
+ react_1.default.createElement("div", { className: "sm:flex sm:items-baseline sm:justify-between" },
38
+ react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Our Favorites"),
39
+ react_1.default.createElement("a", { href: "#", className: "hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block" },
40
+ "Browse all favorites",
41
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))),
42
+ react_1.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-y-10 sm:grid-cols-3 sm:gap-x-6 sm:gap-y-0 lg:gap-x-8" }, products.map(function (product) { return (react_1.default.createElement("div", { key: product.id, className: "group relative" },
43
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "h-96 w-full rounded-lg object-cover group-hover:opacity-75 sm:aspect-2/3 sm:h-auto" }),
44
+ react_1.default.createElement("h3", { className: "mt-4 text-base font-semibold text-gray-900" },
45
+ react_1.default.createElement("a", { href: product.href },
46
+ react_1.default.createElement("span", { className: "absolute inset-0" }),
47
+ product.name)),
48
+ react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, product.price))); })),
49
+ react_1.default.createElement("div", { className: "mt-6 sm:hidden" },
50
+ react_1.default.createElement("a", { href: "#", className: "block text-sm font-semibold text-indigo-600 hover:text-indigo-500" },
51
+ "Browse all favorites",
52
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))))));
53
+ };
54
+ exports.VistaProductListV7 = VistaProductListV7;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV8: () => React.JSX.Element;
@@ -0,0 +1,73 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV8 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var solid_1 = require("@heroicons/react/20/solid");
9
+ var class_names_1 = require("../../utils/class-names");
10
+ var products = [
11
+ {
12
+ id: 1,
13
+ name: 'Organize Basic Set (Walnut)',
14
+ price: '$149',
15
+ rating: 5,
16
+ reviewCount: 38,
17
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-05-image-card-01.jpg',
18
+ imageAlt: 'TODO',
19
+ href: '#',
20
+ },
21
+ {
22
+ id: 2,
23
+ name: 'Organize Pen Holder',
24
+ price: '$15',
25
+ rating: 5,
26
+ reviewCount: 18,
27
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-05-image-card-02.jpg',
28
+ imageAlt: 'TODO',
29
+ href: '#',
30
+ },
31
+ {
32
+ id: 3,
33
+ name: 'Organize Sticky Note Holder',
34
+ price: '$15',
35
+ rating: 5,
36
+ reviewCount: 14,
37
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-05-image-card-03.jpg',
38
+ imageAlt: 'TODO',
39
+ href: '#',
40
+ },
41
+ {
42
+ id: 4,
43
+ name: 'Organize Phone Holder',
44
+ price: '$15',
45
+ rating: 4,
46
+ reviewCount: 21,
47
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-05-image-card-04.jpg',
48
+ imageAlt: 'TODO',
49
+ href: '#',
50
+ },
51
+ ];
52
+ var VistaProductListV8 = function () {
53
+ return (react_1.default.createElement("div", { className: "bg-white" },
54
+ react_1.default.createElement("div", { className: "mx-auto max-w-7xl overflow-hidden sm:px-6 lg:px-8" },
55
+ react_1.default.createElement("h2", { className: "sr-only" }, "Products"),
56
+ react_1.default.createElement("div", { className: "-mx-px grid grid-cols-2 border-l border-gray-200 sm:mx-0 md:grid-cols-3 lg:grid-cols-4" }, products.map(function (product) { return (react_1.default.createElement("div", { key: product.id, className: "group relative border-r border-b border-gray-200 p-4 sm:p-6" },
57
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-square rounded-lg bg-gray-200 object-cover group-hover:opacity-75" }),
58
+ react_1.default.createElement("div", { className: "pt-10 pb-4 text-center" },
59
+ react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" },
60
+ react_1.default.createElement("a", { href: product.href },
61
+ react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" }),
62
+ product.name)),
63
+ react_1.default.createElement("div", { className: "mt-3 flex flex-col items-center" },
64
+ react_1.default.createElement("p", { className: "sr-only" },
65
+ product.rating,
66
+ " out of 5 stars"),
67
+ 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-yellow-400' : 'text-gray-200', 'size-5 shrink-0') })); })),
68
+ react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" },
69
+ product.reviewCount,
70
+ " reviews")),
71
+ react_1.default.createElement("p", { className: "mt-4 text-base font-medium text-gray-900" }, product.price)))); })))));
72
+ };
73
+ exports.VistaProductListV8 = VistaProductListV8;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaProductListV9: () => React.JSX.Element;
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.VistaProductListV9 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var products = [
9
+ {
10
+ id: 1,
11
+ name: 'Nomad Pouch',
12
+ href: '#',
13
+ price: '$50',
14
+ availability: 'White and Black',
15
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-07-product-01.jpg',
16
+ imageAlt: 'White fabric pouch with white zipper, black zipper pull, and black elastic loop.',
17
+ },
18
+ {
19
+ id: 2,
20
+ name: 'Zip Tote Basket',
21
+ href: '#',
22
+ price: '$140',
23
+ availability: 'Washed Black',
24
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-07-product-02.jpg',
25
+ imageAlt: 'Front of tote bag with washed black canvas body, black straps, and tan leather handles and accents.',
26
+ },
27
+ {
28
+ id: 3,
29
+ name: 'Medium Stuff Satchel',
30
+ href: '#',
31
+ price: '$220',
32
+ availability: 'Blue',
33
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-07-product-03.jpg',
34
+ imageAlt: 'Front of satchel with blue canvas body, black straps and handle, drawstring top, and front zipper pouch.',
35
+ },
36
+ ];
37
+ var VistaProductListV9 = function () {
38
+ return (react_1.default.createElement("div", { className: "bg-white" },
39
+ react_1.default.createElement("div", { className: "mx-auto max-w-7xl overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8" },
40
+ react_1.default.createElement("div", { className: "grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-8" }, products.map(function (product) { return (react_1.default.createElement("a", { key: product.id, href: product.href, className: "group text-sm" },
41
+ react_1.default.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: "aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75" }),
42
+ react_1.default.createElement("h3", { className: "mt-4 font-medium text-gray-900" }, product.name),
43
+ react_1.default.createElement("p", { className: "text-gray-500 italic" }, product.availability),
44
+ react_1.default.createElement("p", { className: "mt-2 font-medium text-gray-900" }, product.price))); })))));
45
+ };
46
+ exports.VistaProductListV9 = VistaProductListV9;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appcorp/app-corp-vista",
3
- "version": "0.1.93",
3
+ "version": "0.1.94",
4
4
  "scripts": {
5
5
  "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib",
6
6
  "build:next": "next build",
@@ -0,0 +1,33 @@
1
+ export interface VistaProductListV1Props {
2
+ id: string;
3
+ }
4
+ export interface VistaProductListV2Props {
5
+ id: string;
6
+ }
7
+ export interface VistaProductListV3Props {
8
+ id: string;
9
+ }
10
+ export interface VistaProductListV4Props {
11
+ id: string;
12
+ }
13
+ export interface VistaProductListV5Props {
14
+ id: string;
15
+ }
16
+ export interface VistaProductListV6Props {
17
+ id: string;
18
+ }
19
+ export interface VistaProductListV7Props {
20
+ id: string;
21
+ }
22
+ export interface VistaProductListV8Props {
23
+ id: string;
24
+ }
25
+ export interface VistaProductListV9Props {
26
+ id: string;
27
+ }
28
+ export interface VistaProductListV10Props {
29
+ id: string;
30
+ }
31
+ export interface VistaProductListV11Props {
32
+ id: string;
33
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });