-
Notifications
You must be signed in to change notification settings - Fork 112
/
DesignEfficiency.tsx
92 lines (85 loc) · 3.42 KB
/
DesignEfficiency.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { Box } from "@twilio-paste/box";
import { Heading } from "@twilio-paste/heading";
import { Text } from "@twilio-paste/text";
import { useUID } from "@twilio-paste/uid-library";
import * as React from "react";
import { ColorGradientRainbow } from "../color-swatch/ColorGradient";
import type { IconComponent, IconObject } from "../icons-list/types";
import { BouncyAnchor } from "./BouncyAnchor";
import { SectionContainer } from "./SectionContainer";
import { SectionSeparator } from "./SectionSeparator";
const { icons: iconsJson } = require("@twilio-paste/icons/json/icons.json");
const IconComponents: IconComponent = iconsJson.reduce((icons: IconComponent, { name }: IconObject) => {
return {
...icons,
// eslint-disable-next-line import/no-dynamic-require,global-require, @typescript-eslint/no-var-requires
[`${name}`]: require(`@twilio-paste/icons/esm/${name}.js`)[name],
};
}, {});
const someIcons = Object.values(IconComponents);
someIcons.length = 66; // cap it
const DesignEfficiency: React.FC = (): React.ReactElement => {
return (
<SectionContainer>
<SectionSeparator>Design efficiency</SectionSeparator>
<Box display="flex" flexDirection={["column", "column", "row"]} justifyContent="space-between">
<Box
paddingTop="space190"
display="flex"
flexDirection="column"
maxWidth={["100%", "100%", "size40"]}
position="relative"
flexShrink={0}
>
<Heading as="h3" variant="heading20">
Built by designers, for designers
</Heading>
<Text as="span" fontSize="fontSize40" lineHeight="lineHeight40" marginBottom="space70">
1-to-1 code and design libraries means production-ready design prototypes, too.
</Text>
<Text as="span" fontSize="fontSize40" lineHeight="lineHeight40" marginBottom="space70">
With our libraries, you can swap themes easily with Figma variable modes, and prep design files for
efficient design and engineering collaboration.
</Text>
<Box fontWeight="fontWeightSemibold" fontSize="fontSize40" lineHeight="lineHeight40">
<BouncyAnchor text="Find us on Figma Community" href="https://www.figma.com/@twilio" />
</Box>
<Box
marginTop="space170"
paddingTop="space170"
display="grid"
gridTemplateRows="repeat(3, 1fr)"
gridTemplateColumns="repeat(22, 1fr)"
columnGap="space50"
rowGap="space100"
left={-300}
top={300}
position="absolute"
>
{someIcons.map((Icon, index) => {
if (index >= 22 && index < 44) {
return (
<Box marginLeft="spaceNegative180">
<Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />
</Box>
);
}
return <Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />;
})}
</Box>
</Box>
<Box
display={["none", "none", "block"]}
marginTop="space150"
flexGrow={1}
position="relative"
right={[0, 0, -55, -200]}
backgroundColor="colorBackgroundBody"
>
<ColorGradientRainbow omitGrays />
</Box>
</Box>
</SectionContainer>
);
};
export { DesignEfficiency };