@stackshift-ui/features 6.0.3 → 6.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -11
- package/src/features.test.tsx +13 -0
- package/src/features.tsx +64 -0
- package/src/features_a.tsx +95 -0
- package/src/features_b.tsx +119 -0
- package/src/features_c.tsx +76 -0
- package/src/features_d.tsx +74 -0
- package/src/features_e.tsx +143 -0
- package/src/features_f.tsx +120 -0
- package/src/features_g.tsx +138 -0
- package/src/features_h.tsx +135 -0
- package/src/index.ts +12 -0
- package/src/types.ts +412 -0
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { Button } from "@stackshift-ui/button";
|
|
2
|
+
import { Container } from "@stackshift-ui/container";
|
|
3
|
+
import { Flex } from "@stackshift-ui/flex";
|
|
4
|
+
import { Heading } from "@stackshift-ui/heading";
|
|
5
|
+
import { Image } from "@stackshift-ui/image";
|
|
6
|
+
import { Section } from "@stackshift-ui/section";
|
|
7
|
+
import { Text } from "@stackshift-ui/text";
|
|
8
|
+
import { FeaturesProps } from ".";
|
|
9
|
+
import { LabeledRoute } from "./types";
|
|
10
|
+
|
|
11
|
+
export default function Features_F({
|
|
12
|
+
caption,
|
|
13
|
+
title,
|
|
14
|
+
description,
|
|
15
|
+
images,
|
|
16
|
+
primaryButton,
|
|
17
|
+
}: FeaturesProps) {
|
|
18
|
+
return (
|
|
19
|
+
<Section className="py-20 bg-background">
|
|
20
|
+
<Container maxWidth={1280}>
|
|
21
|
+
<Flex wrap align="center">
|
|
22
|
+
<Flex direction="col" className="w-full mb-12 lg:mb-0 lg:w-1/2">
|
|
23
|
+
<FeaturesInfo caption={caption} title={title} description={description} />
|
|
24
|
+
<CTAButton primaryButton={primaryButton} />
|
|
25
|
+
</Flex>
|
|
26
|
+
<ImageGallery images={images} />
|
|
27
|
+
</Flex>
|
|
28
|
+
</Container>
|
|
29
|
+
</Section>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function FeaturesInfo({
|
|
34
|
+
caption,
|
|
35
|
+
title,
|
|
36
|
+
description,
|
|
37
|
+
}: {
|
|
38
|
+
caption?: string;
|
|
39
|
+
title?: string;
|
|
40
|
+
description?: string;
|
|
41
|
+
}) {
|
|
42
|
+
return (
|
|
43
|
+
<Container maxWidth={448} className="ml-0">
|
|
44
|
+
{caption && (
|
|
45
|
+
<Text weight="bold" className="font-bold text-secondary">
|
|
46
|
+
{caption}
|
|
47
|
+
</Text>
|
|
48
|
+
)}
|
|
49
|
+
{title && (
|
|
50
|
+
<Heading fontSize="3xl" className="mb-6">
|
|
51
|
+
{title}
|
|
52
|
+
</Heading>
|
|
53
|
+
)}
|
|
54
|
+
{description && (
|
|
55
|
+
<Text muted className="mb-6 leading-loose">
|
|
56
|
+
{description}
|
|
57
|
+
</Text>
|
|
58
|
+
)}
|
|
59
|
+
</Container>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function CTAButton({ primaryButton }: { primaryButton?: LabeledRoute }) {
|
|
64
|
+
if (!primaryButton?.label) return null;
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
|
|
68
|
+
{primaryButton?.label}
|
|
69
|
+
</Button>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
function ImageGallery({ images }: { images?: any[] }) {
|
|
74
|
+
if (!images || images?.length === 0) return null;
|
|
75
|
+
|
|
76
|
+
function renderImage(
|
|
77
|
+
image?: string,
|
|
78
|
+
alt?: string,
|
|
79
|
+
width?: number,
|
|
80
|
+
height?: number,
|
|
81
|
+
className?: string,
|
|
82
|
+
) {
|
|
83
|
+
return (
|
|
84
|
+
<div className={`overflow-hidden ${className}`}>
|
|
85
|
+
<Image
|
|
86
|
+
className="object-cover w-full h-auto rounded-global"
|
|
87
|
+
src={image}
|
|
88
|
+
sizes="100vw"
|
|
89
|
+
width={width}
|
|
90
|
+
height={height}
|
|
91
|
+
alt={alt ?? "feature-image"}
|
|
92
|
+
/>
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
return (
|
|
98
|
+
<div className="w-full lg:w-1/2">
|
|
99
|
+
<div className="items-end mb-4 lg:flex lg:flex-wrap">
|
|
100
|
+
<div className="h-full px-3 mb-4 lg:mb-0 lg:w-2/3">
|
|
101
|
+
{images[0]?.image && renderImage(images[0].image, images[0].alt, 356, 192, "h-[269px]")}
|
|
102
|
+
</div>
|
|
103
|
+
<div className="h-full px-3 lg:w-1/3">
|
|
104
|
+
{images[1]?.image && renderImage(images[1].image, images[1].alt, 166, 128, "")}
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div className="items-start mb-4 lg:flex lg:flex-wrap">
|
|
108
|
+
<div className="h-full px-3 mb-4 lg:mb-0 lg:w-1/3">
|
|
109
|
+
{images[2]?.image &&
|
|
110
|
+
renderImage(images[2].image, images[2].alt, 166, 128, "h-[269px] lg:h-[126px]")}
|
|
111
|
+
</div>
|
|
112
|
+
<div className="h-full px-3 lg:w-2/3">
|
|
113
|
+
{images[3]?.image && renderImage(images[3].image, images[3].alt, 356, 192, "")}
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export { Features_F };
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { Container } from "@stackshift-ui/container";
|
|
2
|
+
import { Flex } from "@stackshift-ui/flex";
|
|
3
|
+
import { Heading } from "@stackshift-ui/heading";
|
|
4
|
+
import { Image } from "@stackshift-ui/image";
|
|
5
|
+
import { Section } from "@stackshift-ui/section";
|
|
6
|
+
import { Text } from "@stackshift-ui/text";
|
|
7
|
+
import React from "react";
|
|
8
|
+
import { FeaturesProps } from ".";
|
|
9
|
+
|
|
10
|
+
export default function Features_G({ caption, title, description, images, tags }: FeaturesProps) {
|
|
11
|
+
return (
|
|
12
|
+
<Section className="py-20 bg-background">
|
|
13
|
+
<Container maxWidth={1280}>
|
|
14
|
+
<Flex wrap align="center">
|
|
15
|
+
<div className="w-full px-4 mb-12 lg:mb-0 lg:w-1/2">
|
|
16
|
+
<Container maxWidth={448}>
|
|
17
|
+
<FeaturesInfo caption={caption} title={title} description={description} />
|
|
18
|
+
<TagList tags={tags} />
|
|
19
|
+
</Container>
|
|
20
|
+
</div>
|
|
21
|
+
<ImageGallery images={images} />
|
|
22
|
+
</Flex>
|
|
23
|
+
</Container>
|
|
24
|
+
</Section>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function FeaturesInfo({
|
|
29
|
+
caption,
|
|
30
|
+
title,
|
|
31
|
+
description,
|
|
32
|
+
}: {
|
|
33
|
+
caption?: string;
|
|
34
|
+
title?: string;
|
|
35
|
+
description?: string;
|
|
36
|
+
}) {
|
|
37
|
+
return (
|
|
38
|
+
<React.Fragment>
|
|
39
|
+
{caption && (
|
|
40
|
+
<Text weight="bold" className="text-secondary">
|
|
41
|
+
{caption}
|
|
42
|
+
</Text>
|
|
43
|
+
)}
|
|
44
|
+
{title && (
|
|
45
|
+
<Heading fontSize="3xl" className="mb-3">
|
|
46
|
+
{title}
|
|
47
|
+
</Heading>
|
|
48
|
+
)}
|
|
49
|
+
{description && (
|
|
50
|
+
<Text muted className="mb-6 leading-loose ">
|
|
51
|
+
{description}
|
|
52
|
+
</Text>
|
|
53
|
+
)}
|
|
54
|
+
</React.Fragment>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function TagList({ tags }: { tags?: string[] }) {
|
|
59
|
+
if (!tags) return null;
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<ul className="font-bold text-gray-500">
|
|
63
|
+
{tags.map(item => (
|
|
64
|
+
<FeatureItem item={item} />
|
|
65
|
+
))}
|
|
66
|
+
</ul>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
function FeatureItem({ item }: { item?: string }) {
|
|
71
|
+
if (!item) return null;
|
|
72
|
+
|
|
73
|
+
return (
|
|
74
|
+
<Flex as="li" align="center" className="mb-2 ">
|
|
75
|
+
<svg
|
|
76
|
+
className="w-5 h-5 mr-2 text-primary-foreground"
|
|
77
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
78
|
+
viewBox="0 0 20 20"
|
|
79
|
+
fill="currentColor">
|
|
80
|
+
<path
|
|
81
|
+
fillRule="evenodd"
|
|
82
|
+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
83
|
+
clipRule="evenodd"
|
|
84
|
+
/>
|
|
85
|
+
</svg>
|
|
86
|
+
<span>{item}</span>
|
|
87
|
+
</Flex>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
function ImageGallery({ images }: { images?: any[] }) {
|
|
92
|
+
if (!images || images?.length === 0) return null;
|
|
93
|
+
|
|
94
|
+
function renderImage(
|
|
95
|
+
image?: string,
|
|
96
|
+
alt?: string,
|
|
97
|
+
width?: number,
|
|
98
|
+
height?: number,
|
|
99
|
+
className?: string,
|
|
100
|
+
) {
|
|
101
|
+
return (
|
|
102
|
+
<div className={`overflow-hidden ${className}`}>
|
|
103
|
+
<Image
|
|
104
|
+
className="object-cover w-full h-auto rounded-global"
|
|
105
|
+
src={image}
|
|
106
|
+
sizes="100vw"
|
|
107
|
+
width={width}
|
|
108
|
+
height={height}
|
|
109
|
+
alt={alt ?? "feature-image"}
|
|
110
|
+
/>
|
|
111
|
+
</div>
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
return (
|
|
116
|
+
<div className="w-full lg:w-1/2">
|
|
117
|
+
<div className="items-end mb-4 lg:flex lg:flex-wrap">
|
|
118
|
+
<div className="h-full px-3 mb-4 lg:mb-0 lg:w-2/3">
|
|
119
|
+
{images[0]?.image && renderImage(images[0].image, images[0].alt, 356, 192, "h-[269px]")}
|
|
120
|
+
</div>
|
|
121
|
+
<div className="h-full px-3 lg:w-1/3">
|
|
122
|
+
{images[1]?.image && renderImage(images[1].image, images[1].alt, 166, 128, "")}
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
<div className="items-start mb-4 lg:flex lg:flex-wrap">
|
|
126
|
+
<div className="h-full px-3 mb-4 lg:mb-0 lg:w-1/3">
|
|
127
|
+
{images[2]?.image &&
|
|
128
|
+
renderImage(images[2].image, images[2].alt, 166, 128, "h-[269px] lg:h-[126px]")}
|
|
129
|
+
</div>
|
|
130
|
+
<div className="h-full px-3 lg:w-2/3">
|
|
131
|
+
{images[3]?.image && renderImage(images[3].image, images[3].alt, 356, 192, "")}
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
export { Features_G };
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { Container } from "@stackshift-ui/container";
|
|
2
|
+
import { Flex } from "@stackshift-ui/flex";
|
|
3
|
+
import { Heading } from "@stackshift-ui/heading";
|
|
4
|
+
import { Image } from "@stackshift-ui/image";
|
|
5
|
+
import { Section } from "@stackshift-ui/section";
|
|
6
|
+
import { Text } from "@stackshift-ui/text";
|
|
7
|
+
import React from "react";
|
|
8
|
+
import { FeaturesProps } from ".";
|
|
9
|
+
import { ArrayOfImageTitleAndText } from "./types";
|
|
10
|
+
|
|
11
|
+
export default function Features_H({ caption, title, features, images }: FeaturesProps) {
|
|
12
|
+
return (
|
|
13
|
+
<Section className="py-20 bg-background">
|
|
14
|
+
<Container maxWidth={1280}>
|
|
15
|
+
<Flex wrap align="center">
|
|
16
|
+
<div className="w-full mb-12 lg:mb-0 lg:w-1/2">
|
|
17
|
+
<Container maxWidth={448}>
|
|
18
|
+
<CaptionAndTitleSection caption={caption} title={title} />
|
|
19
|
+
<FeaturesList features={features} />
|
|
20
|
+
</Container>
|
|
21
|
+
</div>
|
|
22
|
+
<ImageGallery images={images} />
|
|
23
|
+
</Flex>
|
|
24
|
+
</Container>
|
|
25
|
+
</Section>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function CaptionAndTitleSection({ caption, title }: { caption?: string; title?: string }) {
|
|
30
|
+
return (
|
|
31
|
+
<React.Fragment>
|
|
32
|
+
{caption && (
|
|
33
|
+
<Text weight="bold" className="text-secondary">
|
|
34
|
+
{caption}
|
|
35
|
+
</Text>
|
|
36
|
+
)}
|
|
37
|
+
{title && (
|
|
38
|
+
<Heading fontSize="3xl" className="mb-6">
|
|
39
|
+
{title}
|
|
40
|
+
</Heading>
|
|
41
|
+
)}
|
|
42
|
+
</React.Fragment>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function FeaturesList({ features }: { features?: ArrayOfImageTitleAndText[] }) {
|
|
47
|
+
if (!features || features?.length <= 0) return null;
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<ul>
|
|
51
|
+
{features.map(feature => {
|
|
52
|
+
return <FeatureItem feature={feature} key={feature._key} />;
|
|
53
|
+
})}
|
|
54
|
+
</ul>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function FeatureItem({ feature }: { feature?: ArrayOfImageTitleAndText }) {
|
|
59
|
+
if (!feature) return null;
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<Flex as="li">
|
|
63
|
+
<FeatureIcon />
|
|
64
|
+
<div className="max-w-xs">
|
|
65
|
+
<Text weight="bold" className="text-gray-500">
|
|
66
|
+
{feature?.title}
|
|
67
|
+
</Text>
|
|
68
|
+
<Text muted className="leading-loose">
|
|
69
|
+
{feature?.plainText}
|
|
70
|
+
</Text>
|
|
71
|
+
</div>
|
|
72
|
+
</Flex>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function FeatureIcon() {
|
|
77
|
+
return (
|
|
78
|
+
<svg
|
|
79
|
+
className="w-8 h-8 mr-3 text-primary"
|
|
80
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
81
|
+
fill="none"
|
|
82
|
+
viewBox="0 0 24 24"
|
|
83
|
+
stroke="currentColor">
|
|
84
|
+
<path
|
|
85
|
+
strokeLinecap="round"
|
|
86
|
+
strokeLinejoin="round"
|
|
87
|
+
strokeWidth={2}
|
|
88
|
+
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
|
|
89
|
+
/>
|
|
90
|
+
</svg>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
function ImageGallery({ images }: { images?: any[] }) {
|
|
95
|
+
if (!images || images?.length === 0) return null;
|
|
96
|
+
|
|
97
|
+
return (
|
|
98
|
+
<div className="items-center w-full px-4 sm:flex md:px-0 lg:w-1/2">
|
|
99
|
+
<div className="mb-5 sm:mb-0 sm:w-1/2">
|
|
100
|
+
{images?.[0]?.image && (
|
|
101
|
+
<Image
|
|
102
|
+
className="object-cover overflow-hidden rounded-global"
|
|
103
|
+
src={`${images?.[0]?.image}`}
|
|
104
|
+
width={640}
|
|
105
|
+
height={800}
|
|
106
|
+
sizes="(max-width: 639px) 100vw, (min-width: 640px) 30vw"
|
|
107
|
+
alt={images?.[0]?.alt ?? "features-image-1"}
|
|
108
|
+
/>
|
|
109
|
+
)}
|
|
110
|
+
{images?.[1]?.image && (
|
|
111
|
+
<Image
|
|
112
|
+
className="object-cover mt-6 overflow-hidden rounded-global"
|
|
113
|
+
src={`${images?.[1]?.image}`}
|
|
114
|
+
width={640}
|
|
115
|
+
height={800}
|
|
116
|
+
sizes="(max-width: 639px) 100vw, (min-width: 640px) 30vw"
|
|
117
|
+
alt={images?.[1]?.alt ?? "features-image-2"}
|
|
118
|
+
/>
|
|
119
|
+
)}
|
|
120
|
+
</div>
|
|
121
|
+
{images?.[2]?.image && (
|
|
122
|
+
<Image
|
|
123
|
+
className="object-cover overflow-hidden rounded-global sm:ml-6 sm:w-1/2"
|
|
124
|
+
src={`${images?.[2]?.image}`}
|
|
125
|
+
width={640}
|
|
126
|
+
height={800}
|
|
127
|
+
sizes="(max-width: 639px) 100vw, (min-width: 640px) 30vw"
|
|
128
|
+
alt={images?.[2]?.alt ?? "features-image-3"}
|
|
129
|
+
/>
|
|
130
|
+
)}
|
|
131
|
+
</div>
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
export { Features_H };
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// component exports
|
|
4
|
+
export * from "./features";
|
|
5
|
+
export * from "./features_a";
|
|
6
|
+
export * from "./features_b";
|
|
7
|
+
export * from "./features_c";
|
|
8
|
+
export * from "./features_d";
|
|
9
|
+
export * from "./features_e";
|
|
10
|
+
export * from "./features_f";
|
|
11
|
+
export * from "./features_g";
|
|
12
|
+
export * from "./features_h";
|