@appcorp/app-corp-vista 0.1.93 → 0.1.95

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 (39) hide show
  1. package/organisms/vista-category-preview-v1/vista-category-preview-v1.d.ts +2 -0
  2. package/organisms/vista-category-preview-v1/vista-category-preview-v1.js +52 -0
  3. package/organisms/vista-category-preview-v2/vista-category-preview-v2.d.ts +2 -0
  4. package/organisms/vista-category-preview-v2/vista-category-preview-v2.js +44 -0
  5. package/organisms/vista-category-preview-v3/vista-category-preview-v3.d.ts +2 -0
  6. package/organisms/vista-category-preview-v3/vista-category-preview-v3.js +22 -0
  7. package/organisms/vista-category-preview-v4/vista-category-preview-v4.d.ts +2 -0
  8. package/organisms/vista-category-preview-v4/vista-category-preview-v4.js +41 -0
  9. package/organisms/vista-category-preview-v5/vista-category-preview-v5.d.ts +2 -0
  10. package/organisms/vista-category-preview-v5/vista-category-preview-v5.js +56 -0
  11. package/organisms/vista-category-preview-v6/vista-category-preview-v6.d.ts +2 -0
  12. package/organisms/vista-category-preview-v6/vista-category-preview-v6.js +23 -0
  13. package/organisms/vista-product-list-v1/vista-product-list-v1.d.ts +2 -0
  14. package/organisms/vista-product-list-v1/vista-product-list-v1.js +60 -0
  15. package/organisms/vista-product-list-v10/vista-product-list-v10.d.ts +2 -0
  16. package/organisms/vista-product-list-v10/vista-product-list-v10.js +67 -0
  17. package/organisms/vista-product-list-v11/vista-product-list-v11.d.ts +2 -0
  18. package/organisms/vista-product-list-v11/vista-product-list-v11.js +56 -0
  19. package/organisms/vista-product-list-v2/vista-product-list-v2.d.ts +2 -0
  20. package/organisms/vista-product-list-v2/vista-product-list-v2.js +67 -0
  21. package/organisms/vista-product-list-v3/vista-product-list-v3.d.ts +2 -0
  22. package/organisms/vista-product-list-v3/vista-product-list-v3.js +94 -0
  23. package/organisms/vista-product-list-v4/vista-product-list-v4.d.ts +2 -0
  24. package/organisms/vista-product-list-v4/vista-product-list-v4.js +48 -0
  25. package/organisms/vista-product-list-v5/vista-product-list-v5.d.ts +2 -0
  26. package/organisms/vista-product-list-v5/vista-product-list-v5.js +67 -0
  27. package/organisms/vista-product-list-v6/vista-product-list-v6.d.ts +2 -0
  28. package/organisms/vista-product-list-v6/vista-product-list-v6.js +51 -0
  29. package/organisms/vista-product-list-v7/vista-product-list-v7.d.ts +2 -0
  30. package/organisms/vista-product-list-v7/vista-product-list-v7.js +54 -0
  31. package/organisms/vista-product-list-v8/vista-product-list-v8.d.ts +2 -0
  32. package/organisms/vista-product-list-v8/vista-product-list-v8.js +73 -0
  33. package/organisms/vista-product-list-v9/vista-product-list-v9.d.ts +2 -0
  34. package/organisms/vista-product-list-v9/vista-product-list-v9.js +46 -0
  35. package/package.json +1 -1
  36. package/type/vista-category-preview-type.d.ts +18 -0
  37. package/type/vista-category-preview-type.js +2 -0
  38. package/type/vista-product-list-type.d.ts +33 -0
  39. package/type/vista-product-list-type.js +2 -0
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaCategoryPreviewV1: () => React.JSX.Element;
@@ -0,0 +1,52 @@
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.VistaCategoryPreviewV1 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var VistaCategoryPreviewV1 = function () {
9
+ return (react_1.default.createElement("div", { className: "bg-gray-50" },
10
+ react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8" },
11
+ react_1.default.createElement("div", { className: "sm:flex sm:items-baseline sm:justify-between" },
12
+ react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Shop by Category"),
13
+ react_1.default.createElement("a", { href: "#", className: "hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block" },
14
+ "Browse all categories",
15
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))),
16
+ react_1.default.createElement("div", { className: "mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:grid-rows-2 sm:gap-x-6 lg:gap-8" },
17
+ react_1.default.createElement("div", { className: "group relative aspect-2/1 overflow-hidden rounded-lg sm:row-span-2 sm:aspect-square" },
18
+ react_1.default.createElement("img", { alt: "Two models wearing women's black cotton crewneck tee and off-white cotton crewneck tee.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-featured-category.jpg", className: "absolute size-full object-cover group-hover:opacity-75" }),
19
+ react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 bg-linear-to-b from-transparent to-black opacity-50" }),
20
+ react_1.default.createElement("div", { className: "absolute inset-0 flex items-end p-6" },
21
+ react_1.default.createElement("div", null,
22
+ react_1.default.createElement("h3", { className: "font-semibold text-white" },
23
+ react_1.default.createElement("a", { href: "#" },
24
+ react_1.default.createElement("span", { className: "absolute inset-0" }),
25
+ "New Arrivals")),
26
+ react_1.default.createElement("p", { "aria-hidden": "true", className: "mt-1 text-sm text-white" }, "Shop now")))),
27
+ react_1.default.createElement("div", { className: "group relative aspect-2/1 overflow-hidden rounded-lg sm:aspect-auto" },
28
+ react_1.default.createElement("img", { alt: "Wooden shelf with gray and olive drab green baseball caps, next to wooden clothes hanger with sweaters.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-category-01.jpg", className: "absolute size-full object-cover group-hover:opacity-75" }),
29
+ react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 bg-linear-to-b from-transparent to-black opacity-50" }),
30
+ react_1.default.createElement("div", { className: "absolute inset-0 flex items-end p-6" },
31
+ react_1.default.createElement("div", null,
32
+ react_1.default.createElement("h3", { className: "font-semibold text-white" },
33
+ react_1.default.createElement("a", { href: "#" },
34
+ react_1.default.createElement("span", { className: "absolute inset-0" }),
35
+ "Accessories")),
36
+ react_1.default.createElement("p", { "aria-hidden": "true", className: "mt-1 text-sm text-white" }, "Shop now")))),
37
+ react_1.default.createElement("div", { className: "group relative aspect-2/1 overflow-hidden rounded-lg sm:aspect-auto" },
38
+ react_1.default.createElement("img", { alt: "Walnut desk organizer set with white modular trays, next to porcelain mug on wooden desk.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-category-02.jpg", className: "absolute size-full object-cover group-hover:opacity-75" }),
39
+ react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 bg-linear-to-b from-transparent to-black opacity-50" }),
40
+ react_1.default.createElement("div", { className: "absolute inset-0 flex items-end p-6" },
41
+ react_1.default.createElement("div", null,
42
+ react_1.default.createElement("h3", { className: "font-semibold text-white" },
43
+ react_1.default.createElement("a", { href: "#" },
44
+ react_1.default.createElement("span", { className: "absolute inset-0" }),
45
+ "Workspace")),
46
+ react_1.default.createElement("p", { "aria-hidden": "true", className: "mt-1 text-sm text-white" }, "Shop now"))))),
47
+ react_1.default.createElement("div", { className: "mt-6 sm:hidden" },
48
+ react_1.default.createElement("a", { href: "#", className: "block text-sm font-semibold text-indigo-600 hover:text-indigo-500" },
49
+ "Browse all categories",
50
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))))));
51
+ };
52
+ exports.VistaCategoryPreviewV1 = VistaCategoryPreviewV1;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaCategoryPreviewV2: () => React.JSX.Element;
@@ -0,0 +1,44 @@
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.VistaCategoryPreviewV2 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var callouts = [
9
+ {
10
+ name: 'Desk and Office',
11
+ description: 'Work from home accessories',
12
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-01.jpg',
13
+ imageAlt: 'Desk with leather desk pad, walnut desk organizer, wireless keyboard and mouse, and porcelain mug.',
14
+ href: '#',
15
+ },
16
+ {
17
+ name: 'Self-Improvement',
18
+ description: 'Journals and note-taking',
19
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-02.jpg',
20
+ imageAlt: 'Wood table with porcelain mug, leather journal, brass pen, leather key ring, and a houseplant.',
21
+ href: '#',
22
+ },
23
+ {
24
+ name: 'Travel',
25
+ description: 'Daily commute essentials',
26
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-03.jpg',
27
+ imageAlt: 'Collection of four insulated travel bottles on wooden shelf.',
28
+ href: '#',
29
+ },
30
+ ];
31
+ var VistaCategoryPreviewV2 = function () {
32
+ return (react_1.default.createElement("div", { className: "bg-gray-100" },
33
+ react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" },
34
+ react_1.default.createElement("div", { className: "mx-auto max-w-2xl py-16 sm:py-24 lg:max-w-none lg:py-32" },
35
+ react_1.default.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, "Collections"),
36
+ react_1.default.createElement("div", { className: "mt-6 space-y-12 lg:grid lg:grid-cols-3 lg:space-y-0 lg:gap-x-6" }, callouts.map(function (callout) { return (react_1.default.createElement("div", { key: callout.name, className: "group relative" },
37
+ react_1.default.createElement("img", { alt: callout.imageAlt, src: callout.imageSrc, className: "w-full rounded-lg bg-white object-cover group-hover:opacity-75 max-sm:h-80 sm:aspect-2/1 lg:aspect-square" }),
38
+ react_1.default.createElement("h3", { className: "mt-6 text-sm text-gray-500" },
39
+ react_1.default.createElement("a", { href: callout.href },
40
+ react_1.default.createElement("span", { className: "absolute inset-0" }),
41
+ callout.name)),
42
+ react_1.default.createElement("p", { className: "text-base font-semibold text-gray-900" }, callout.description))); }))))));
43
+ };
44
+ exports.VistaCategoryPreviewV2 = VistaCategoryPreviewV2;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaCategoryPreviewV3: () => React.JSX.Element;
@@ -0,0 +1,22 @@
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.VistaCategoryPreviewV3 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var VistaCategoryPreviewV3 = function () {
9
+ return (react_1.default.createElement("div", { className: "bg-white" },
10
+ 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" },
11
+ react_1.default.createElement("div", { className: "relative overflow-hidden rounded-lg lg:h-96" },
12
+ react_1.default.createElement("div", { className: "absolute inset-0" },
13
+ react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/category-page-01-featured-collection.jpg", className: "size-full object-cover" })),
14
+ react_1.default.createElement("div", { "aria-hidden": "true", className: "relative h-96 w-full lg:hidden" }),
15
+ react_1.default.createElement("div", { "aria-hidden": "true", className: "relative h-32 w-full lg:hidden" }),
16
+ react_1.default.createElement("div", { className: "absolute inset-x-0 bottom-0 rounded-br-lg rounded-bl-lg bg-black/75 p-6 backdrop-blur-sm backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-x-auto lg:inset-y-0 lg:w-96 lg:flex-col lg:items-start lg:rounded-tl-lg lg:rounded-br-none" },
17
+ react_1.default.createElement("div", null,
18
+ react_1.default.createElement("h2", { className: "text-xl font-bold text-white" }, "Workspace Collection"),
19
+ react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-300" }, "Upgrade your desk with objects that keep you organized and clear-minded.")),
20
+ react_1.default.createElement("a", { href: "#", className: "mt-6 flex shrink-0 items-center justify-center rounded-md border border-white/25 px-4 py-3 text-base font-medium text-white hover:bg-white/10 sm:mt-0 sm:ml-8 lg:ml-0 lg:w-full" }, "View the collection"))))));
21
+ };
22
+ exports.VistaCategoryPreviewV3 = VistaCategoryPreviewV3;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaCategoryPreviewV4: () => React.JSX.Element;
@@ -0,0 +1,41 @@
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.VistaCategoryPreviewV4 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var categories = [
9
+ {
10
+ name: 'Handcrafted Collection',
11
+ href: '#',
12
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-01-collection-01.jpg',
13
+ imageAlt: 'Brown leather key ring with brass metal loops and rivets on wood table.',
14
+ description: 'Keep your phone, keys, and wallet together, so you can lose everything at once.',
15
+ },
16
+ {
17
+ name: 'Organized Desk Collection',
18
+ href: '#',
19
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-01-collection-02.jpg',
20
+ imageAlt: 'Natural leather mouse pad on white desk next to porcelain mug and keyboard.',
21
+ description: 'The rest of the house will still be a mess, but your desk will look great.',
22
+ },
23
+ {
24
+ name: 'Focus Collection',
25
+ href: '#',
26
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-01-collection-03.jpg',
27
+ imageAlt: 'Person placing task list card into walnut card holder next to felt carrying case on leather desk pad.',
28
+ description: 'Be more productive than enterprise project managers with a single piece of paper.',
29
+ },
30
+ ];
31
+ var VistaCategoryPreviewV4 = function () {
32
+ return (react_1.default.createElement("div", { className: "bg-white" },
33
+ react_1.default.createElement("div", { className: "mx-auto max-w-xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8" },
34
+ react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Shop by Collection"),
35
+ react_1.default.createElement("p", { className: "mt-4 text-base text-gray-500" }, "Each season, we collaborate with world-class designers to create a collection inspired by the natural world."),
36
+ react_1.default.createElement("div", { className: "mt-10 space-y-12 lg:grid lg:grid-cols-3 lg:space-y-0 lg:gap-x-8" }, categories.map(function (category) { return (react_1.default.createElement("a", { key: category.name, href: category.href, className: "group block" },
37
+ react_1.default.createElement("img", { alt: category.imageAlt, src: category.imageSrc, className: "aspect-3/2 w-full rounded-lg object-cover group-hover:opacity-75 lg:aspect-5/6" }),
38
+ react_1.default.createElement("h3", { className: "mt-4 text-base font-semibold text-gray-900" }, category.name),
39
+ react_1.default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, category.description))); })))));
40
+ };
41
+ exports.VistaCategoryPreviewV4 = VistaCategoryPreviewV4;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaCategoryPreviewV5: () => 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.VistaCategoryPreviewV5 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var categories = [
9
+ {
10
+ name: 'New Arrivals',
11
+ href: '#',
12
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-01-category-01.jpg',
13
+ },
14
+ {
15
+ name: 'Productivity',
16
+ href: '#',
17
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-01-category-02.jpg',
18
+ },
19
+ {
20
+ name: 'Workspace',
21
+ href: '#',
22
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-01-category-04.jpg',
23
+ },
24
+ {
25
+ name: 'Accessories',
26
+ href: '#',
27
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-01-category-05.jpg',
28
+ },
29
+ {
30
+ name: 'Sale',
31
+ href: '#',
32
+ imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-01-category-03.jpg',
33
+ },
34
+ ];
35
+ var VistaCategoryPreviewV5 = function () {
36
+ return (react_1.default.createElement("div", { className: "bg-white" },
37
+ react_1.default.createElement("div", { className: "py-16 sm:py-24 xl:mx-auto xl:max-w-7xl xl:px-8" },
38
+ react_1.default.createElement("div", { className: "px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 xl:px-0" },
39
+ react_1.default.createElement("h2", { className: "text-2xl font-bold tracking-tight text-gray-900" }, "Shop by Category"),
40
+ react_1.default.createElement("a", { href: "#", className: "hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block" },
41
+ "Browse all categories",
42
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))),
43
+ react_1.default.createElement("div", { className: "mt-4 flow-root" },
44
+ react_1.default.createElement("div", { className: "-my-2" },
45
+ react_1.default.createElement("div", { className: "relative box-content h-80 overflow-x-auto py-2 xl:overflow-visible" },
46
+ react_1.default.createElement("div", { className: "absolute flex space-x-8 px-4 sm:px-6 lg:px-8 xl:relative xl:grid xl:grid-cols-5 xl:gap-x-8 xl:space-x-0 xl:px-0" }, categories.map(function (category) { return (react_1.default.createElement("a", { key: category.name, href: category.href, className: "relative flex h-80 w-56 flex-col overflow-hidden rounded-lg p-6 hover:opacity-75 xl:w-auto" },
47
+ react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" },
48
+ react_1.default.createElement("img", { alt: "", src: category.imageSrc, className: "size-full object-cover" })),
49
+ react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-x-0 bottom-0 h-2/3 bg-linear-to-t from-gray-800 opacity-50" }),
50
+ react_1.default.createElement("span", { className: "relative mt-auto text-center text-xl font-bold text-white" }, category.name))); }))))),
51
+ react_1.default.createElement("div", { className: "mt-6 px-4 sm:hidden" },
52
+ react_1.default.createElement("a", { href: "#", className: "block text-sm font-semibold text-indigo-600 hover:text-indigo-500" },
53
+ "Browse all categories",
54
+ react_1.default.createElement("span", { "aria-hidden": "true" }, " \u2192"))))));
55
+ };
56
+ exports.VistaCategoryPreviewV5 = VistaCategoryPreviewV5;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const VistaCategoryPreviewV6: () => React.JSX.Element;
@@ -0,0 +1,23 @@
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.VistaCategoryPreviewV6 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var VistaCategoryPreviewV6 = function () {
9
+ return (react_1.default.createElement("div", { className: "grid min-h-full grid-cols-1 grid-rows-2 lg:grid-cols-2 lg:grid-rows-1" },
10
+ react_1.default.createElement("div", { className: "relative flex" },
11
+ react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-01.jpg", className: "absolute inset-0 size-full object-cover" }),
12
+ react_1.default.createElement("div", { className: "relative flex w-full flex-col items-start justify-end bg-black/40 p-8 sm:p-12" },
13
+ react_1.default.createElement("h2", { className: "text-lg font-medium text-white/75" }, "Self-Improvement"),
14
+ react_1.default.createElement("p", { className: "mt-1 text-2xl font-medium text-white" }, "Journals and note-taking"),
15
+ react_1.default.createElement("a", { href: "#", className: "mt-4 rounded-md bg-white px-4 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-50" }, "Shop now"))),
16
+ react_1.default.createElement("div", { className: "relative flex" },
17
+ react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-02.jpg", className: "absolute inset-0 size-full object-cover" }),
18
+ react_1.default.createElement("div", { className: "relative flex w-full flex-col items-start justify-end bg-black/40 p-8 sm:p-12" },
19
+ react_1.default.createElement("h2", { className: "text-lg font-medium text-white/75" }, "Desk and Office"),
20
+ react_1.default.createElement("p", { className: "mt-1 text-2xl font-medium text-white" }, "Work from home accessories"),
21
+ react_1.default.createElement("a", { href: "#", className: "mt-4 rounded-md bg-white px-4 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-50" }, "Shop now")))));
22
+ };
23
+ exports.VistaCategoryPreviewV6 = VistaCategoryPreviewV6;
@@ -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.95",
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,18 @@
1
+ export interface VistaCategoryPreviewV1Props {
2
+ id: string;
3
+ }
4
+ export interface VistaCategoryPreviewV2Props {
5
+ id: string;
6
+ }
7
+ export interface VistaCategoryPreviewV3Props {
8
+ id: string;
9
+ }
10
+ export interface VistaCategoryPreviewV4Props {
11
+ id: string;
12
+ }
13
+ export interface VistaCategoryPreviewV5Props {
14
+ id: string;
15
+ }
16
+ export interface VistaCategoryPreviewV6Props {
17
+ id: string;
18
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -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 });