hds-web 1.36.8 → 1.36.9
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/dist/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +4 -4
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +18 -16
- package/src/HDS/components/Cards/Menu/ConnectorsDropdown.js +137 -0
- package/src/HDS/components/Cards/Menu/flyoutA.js +3 -3
- package/src/HDS/components/Cards/Menu/flyoutB.js +138 -121
- package/src/HDS/components/Cards/Menu/flyoutD.js +8 -79
- package/src/HDS/components/Headers/v3Header.js +29 -53
- package/src/styles/tailwind.css +62 -69
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
3
|
-
import { FlyoutB, FlyoutA,
|
|
3
|
+
import { FlyoutB, FlyoutA, FlyoutD } from "../Menu";
|
|
4
|
+
import ConnectorsDropdown from "../Menu/ConnectorsDropdown";
|
|
4
5
|
|
|
5
6
|
export default function DropdownA(props) {
|
|
6
7
|
return (
|
|
@@ -20,15 +21,24 @@ export default function DropdownA(props) {
|
|
|
20
21
|
key={index}
|
|
21
22
|
className={
|
|
22
23
|
"rounded-2xl " + item.card_bg
|
|
23
|
-
? "bg-neutral-0 rounded-2xl"
|
|
24
|
+
? "bg-neutral-0 rounded-2xl shadow"
|
|
24
25
|
: HDSColor(item.card_bg)
|
|
25
26
|
}
|
|
26
27
|
>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
{item.label === "CONNECTORS" ? (
|
|
29
|
+
<ConnectorsDropdown
|
|
30
|
+
label={item.label}
|
|
31
|
+
childArray={item.childArray}
|
|
32
|
+
// split={item.split}
|
|
33
|
+
split={true}
|
|
34
|
+
/>
|
|
35
|
+
) : (
|
|
36
|
+
<FlyoutA
|
|
37
|
+
label={item.label}
|
|
38
|
+
childArray={item.childArray}
|
|
39
|
+
split={item.split}
|
|
40
|
+
/>
|
|
41
|
+
)}
|
|
32
42
|
</div>
|
|
33
43
|
))}
|
|
34
44
|
</div>
|
|
@@ -52,15 +62,7 @@ export default function DropdownA(props) {
|
|
|
52
62
|
</div>
|
|
53
63
|
</div>
|
|
54
64
|
} */}
|
|
55
|
-
{props.flyoutD &&
|
|
56
|
-
<>
|
|
57
|
-
<div className=" bg-neutral-0 shadow rounded-2xl w-full tb-l:w-[170px] tb-xl:w-[223px] py-6 mt-2 tb-l:mt-0">
|
|
58
|
-
<div>
|
|
59
|
-
<FlyoutD {...props.flyoutD} />
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
</>
|
|
63
|
-
)}
|
|
65
|
+
{props.flyoutD && <FlyoutD />}
|
|
64
66
|
</div>
|
|
65
67
|
</div>
|
|
66
68
|
);
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Icon } from "../../common-components/Icon";
|
|
3
|
+
import { Typography } from "../../../foundation/Typography";
|
|
4
|
+
|
|
5
|
+
export default function FlyoutA(props) {
|
|
6
|
+
const { split } = props;
|
|
7
|
+
|
|
8
|
+
const cardLayout = (label, childArray) => (
|
|
9
|
+
<div className=" group h-full">
|
|
10
|
+
<div className={`w-full h-full ` + (split ? " " : " rounded-2xl")}>
|
|
11
|
+
<div className={`w-full p-6`}>
|
|
12
|
+
{label ? (
|
|
13
|
+
<Typography
|
|
14
|
+
textStyle="h6"
|
|
15
|
+
className=" uppercase group-hover/split:text-neutral-1000 group-hover:text-neutral-1000 group-hover-transition text-neutral-500 mb-4"
|
|
16
|
+
>
|
|
17
|
+
{label}
|
|
18
|
+
</Typography>
|
|
19
|
+
) : (
|
|
20
|
+
<div className="mb-8"></div>
|
|
21
|
+
)}
|
|
22
|
+
<div className={` tb:tb:grid tb:tb:grid-cols-1 tb:min-w-[140px] `}>
|
|
23
|
+
{childArray &&
|
|
24
|
+
childArray.map((item) => (
|
|
25
|
+
<div
|
|
26
|
+
key={item.name}
|
|
27
|
+
className="relative pb-2 flex rounded-lg items-center"
|
|
28
|
+
>
|
|
29
|
+
<a href={item.href} className="w-full">
|
|
30
|
+
<div className="flex group/icon pl-2 py-2 pr-3 hover:pl-[9px] hover:bg-neutral-100 rounded-lg flex-row w-full justify-between tb:min-w-[140px] items-center">
|
|
31
|
+
<div className="flex gap-2 flex-row items-center">
|
|
32
|
+
<div className="flex rounded-lg items-center group-hover:bg-white">
|
|
33
|
+
{item.icon && (
|
|
34
|
+
<Icon
|
|
35
|
+
height={
|
|
36
|
+
"h-5 w-5 stroke-2 " +
|
|
37
|
+
(item.icon === "discord" ||
|
|
38
|
+
item.icon === "octoface" ||
|
|
39
|
+
item.icon === "meetup"
|
|
40
|
+
? ""
|
|
41
|
+
: "group-hover/icon:stroke-blue-500 ")
|
|
42
|
+
}
|
|
43
|
+
variant={item.icon}
|
|
44
|
+
strokeClass={item.strokeClass}
|
|
45
|
+
/>
|
|
46
|
+
)}
|
|
47
|
+
</div>
|
|
48
|
+
<Typography
|
|
49
|
+
textStyle="body3c-medium"
|
|
50
|
+
className="text-neutral-1000 group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
51
|
+
>
|
|
52
|
+
{item.name}
|
|
53
|
+
</Typography>
|
|
54
|
+
</div>
|
|
55
|
+
<div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
56
|
+
<Icon
|
|
57
|
+
height={
|
|
58
|
+
"h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out "
|
|
59
|
+
}
|
|
60
|
+
variant={"chevronright"}
|
|
61
|
+
strokeClass={"stroke-blue-500"}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
{/* {item.description &&
|
|
66
|
+
item.description.length > 0 && (
|
|
67
|
+
<Typography
|
|
68
|
+
textStyle='body3c-medium'
|
|
69
|
+
className='text-neutral-700'>
|
|
70
|
+
{item.description}
|
|
71
|
+
</Typography>
|
|
72
|
+
)} */}
|
|
73
|
+
</div>
|
|
74
|
+
</a>
|
|
75
|
+
</div>
|
|
76
|
+
))}
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div className="grid grid-cols-2 divide-x bg-gray-50">
|
|
80
|
+
{/* {buttonArray && buttonArray.map((item) => (
|
|
81
|
+
<a
|
|
82
|
+
key={item.name}
|
|
83
|
+
href={item.href}
|
|
84
|
+
className="flex justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
|
|
85
|
+
>
|
|
86
|
+
|
|
87
|
+
{item.icon && (
|
|
88
|
+
<Icon
|
|
89
|
+
height={'h-6'}
|
|
90
|
+
variant={item.icon}
|
|
91
|
+
strokeColor={'#6C737F'} />
|
|
92
|
+
)}
|
|
93
|
+
<Typography
|
|
94
|
+
textStyle='h-6'
|
|
95
|
+
className='text-neutral-500'>
|
|
96
|
+
{item.name}
|
|
97
|
+
</Typography>
|
|
98
|
+
</a>
|
|
99
|
+
))} */}
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
);
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<>
|
|
107
|
+
{split ? (
|
|
108
|
+
<>
|
|
109
|
+
<div className="hds-hidden tb-l:flex h-full">
|
|
110
|
+
<div className="rounded-l-2xl">
|
|
111
|
+
{cardLayout(
|
|
112
|
+
props.label,
|
|
113
|
+
props.childArray.slice(
|
|
114
|
+
0,
|
|
115
|
+
Math.ceil(props.childArray.length / 2)
|
|
116
|
+
)
|
|
117
|
+
)}
|
|
118
|
+
</div>
|
|
119
|
+
<div className="group/split rounded-r-2xl">
|
|
120
|
+
{cardLayout(
|
|
121
|
+
null,
|
|
122
|
+
props.childArray.slice(Math.ceil(props.childArray.length / 2))
|
|
123
|
+
)}
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div className="hds-hidden-tbl h-full rounded-2xl">
|
|
127
|
+
{cardLayout(props.label, props.childArray)}
|
|
128
|
+
</div>
|
|
129
|
+
</>
|
|
130
|
+
) : (
|
|
131
|
+
<div className=" shadow h-full rounded-2xl">
|
|
132
|
+
{cardLayout(props.label, props.childArray)}
|
|
133
|
+
</div>
|
|
134
|
+
)}
|
|
135
|
+
</>
|
|
136
|
+
);
|
|
137
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Fragment } from "react";
|
|
3
|
-
import { Popover, Transition } from "@headlessui/react";
|
|
4
2
|
import { Icon } from "../../common-components/Icon";
|
|
5
3
|
import { Typography } from "../../../foundation/Typography";
|
|
4
|
+
|
|
6
5
|
export default function FlyoutA(props) {
|
|
7
6
|
const { split } = props;
|
|
7
|
+
|
|
8
8
|
const cardLayout = (label, childArray) => (
|
|
9
9
|
<div className=" group h-full ">
|
|
10
10
|
<div className={`w-full h-full ` + (split ? " " : " rounded-2xl")}>
|
|
@@ -130,7 +130,7 @@ export default function FlyoutA(props) {
|
|
|
130
130
|
</div>
|
|
131
131
|
</>
|
|
132
132
|
) : (
|
|
133
|
-
<div className="
|
|
133
|
+
<div className=" h-full rounded-2xl">
|
|
134
134
|
{cardLayout(props.label, props.childArray)}
|
|
135
135
|
</div>
|
|
136
136
|
)}
|
|
@@ -1,129 +1,146 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
import { Typography } from '../../../foundation/Typography'
|
|
4
|
-
import { ProfileAvatar } from '../../Avatars'
|
|
5
|
-
import { Time } from "../../../helpers/Time";
|
|
6
|
-
import { HDSButton } from '../../Buttons'
|
|
2
|
+
import { Typography } from "../../../foundation/Typography";
|
|
7
3
|
import { Icon } from "../../common-components";
|
|
8
4
|
|
|
9
5
|
export default function FlyoutB(props) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
6
|
+
const {
|
|
7
|
+
iconVariant = "home03",
|
|
8
|
+
strokeColor = "#C6D6FF",
|
|
9
|
+
strokeClass = "stroke-neutral-800",
|
|
10
|
+
primaryBtnLabel = "label1",
|
|
11
|
+
primaryBtnCTA,
|
|
12
|
+
mainDescription = "Choose from our open source community edition, fully managed cloud edition or custom enterprise",
|
|
13
|
+
secondaryBtn = [
|
|
14
|
+
{
|
|
15
|
+
cta_leftVariantIcon: "home03",
|
|
16
|
+
cta_leftVariantIconColor: "#6C737F",
|
|
17
|
+
cta_text: "Button 1",
|
|
18
|
+
},
|
|
19
|
+
],
|
|
20
|
+
tertiaryBtn,
|
|
21
|
+
} = props;
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div className="flex flex-col justify-between w-full h-full shadow rounded-2xl">
|
|
25
|
+
<a
|
|
26
|
+
href={primaryBtnCTA}
|
|
27
|
+
className="group/card cursor-pointer w-full h-full relative transition-all duration-300 ease-out "
|
|
28
|
+
>
|
|
29
|
+
<div className="group-hover/card:bg-neutral-100 ml-2 z-[1] mt-2 w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-xl absolute "></div>
|
|
30
|
+
<div className="px-6 pt-6 pb-4 w-full h-full ">
|
|
31
|
+
<Typography
|
|
32
|
+
textStyle="h6"
|
|
33
|
+
className="uppercase relative z-[2] group-hover/card:text-neutral-1000 text-neutral-500 mb-4"
|
|
34
|
+
>
|
|
35
|
+
PLATFORM
|
|
36
|
+
</Typography>
|
|
37
|
+
<div className="flex items-start lg:pt-2">
|
|
38
|
+
<div className=" flex items-center relative justify-center p-2.5 h-14 w-14 z-[2] group-hover/card:bg-blue-200 bg-neutral-150 rounded-2xl min-w-[56px] mr-6">
|
|
39
|
+
<Icon
|
|
40
|
+
height="h-6 w-6 stroke-2 group-hover/card:stroke-blue-500"
|
|
41
|
+
variant={iconVariant}
|
|
42
|
+
strokeColor={strokeColor}
|
|
43
|
+
strokeClass={strokeClass}
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
<div className="relative group/card cursor-pointer items-center z-[2]">
|
|
47
|
+
<Typography
|
|
48
|
+
textStyle="body3c-medium"
|
|
49
|
+
className="text-neutral-1000 group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
50
|
+
>
|
|
51
|
+
{props.primaryBtnLabel}
|
|
52
|
+
</Typography>
|
|
53
|
+
<Typography
|
|
54
|
+
className="mt-1 text-neutral-600 relative z-[2]"
|
|
55
|
+
textStyle="body3"
|
|
56
|
+
>
|
|
57
|
+
{mainDescription}
|
|
58
|
+
</Typography>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</a>
|
|
63
|
+
<div className="border-t border-neutral-200 pt-6 mx-6" />
|
|
64
|
+
<div className="flex pb-3 gap-2">
|
|
65
|
+
{secondaryBtn.map((btn, index) => (
|
|
66
|
+
<a
|
|
67
|
+
key={index}
|
|
68
|
+
href={btn.cta_link}
|
|
69
|
+
className="group/btn px-2 justify-around cursor-pointer "
|
|
70
|
+
>
|
|
71
|
+
<div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
|
|
72
|
+
<div className="flex w-full justify-between items-center z-[2] py-2.5">
|
|
73
|
+
<div className="flex rounded-lg gap-2 items-center ">
|
|
74
|
+
{btn.cta_leftVariantIcon && (
|
|
75
|
+
<Icon
|
|
76
|
+
height={
|
|
77
|
+
"h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 "
|
|
78
|
+
}
|
|
79
|
+
variant={btn.cta_leftVariantIcon}
|
|
80
|
+
strokeClass="stroke-neutral-500"
|
|
81
|
+
/>
|
|
82
|
+
)}
|
|
83
|
+
<Typography
|
|
84
|
+
textStyle="body3c-medium"
|
|
85
|
+
className="text-neutral-1000 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
86
|
+
>
|
|
87
|
+
{btn.cta_text}
|
|
88
|
+
</Typography>
|
|
30
89
|
</div>
|
|
31
|
-
<div className="
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
textStyle='body3c-medium'
|
|
40
|
-
className='text-neutral-1000 group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
|
|
41
|
-
{props.primaryBtnLabel}
|
|
42
|
-
</Typography>
|
|
43
|
-
|
|
44
|
-
<div className="flex group-hover/card:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
45
|
-
<Icon
|
|
46
|
-
height={'h-4 w-4 stroke-2 invisible group-hover/card:visible transition-all ease-in-out '}
|
|
47
|
-
variant={'chevronright'}
|
|
48
|
-
strokeClass={'stroke-blue-500'}
|
|
49
|
-
/>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
<Typography className='mt-2 text-neutral-600 relative z-[2]' textStyle='body3'>{mainDescription}</Typography>
|
|
90
|
+
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
91
|
+
<Icon
|
|
92
|
+
height={
|
|
93
|
+
"h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out "
|
|
94
|
+
}
|
|
95
|
+
variant={"chevronright"}
|
|
96
|
+
strokeClass={"stroke-blue-500"}
|
|
97
|
+
/>
|
|
53
98
|
</div>
|
|
54
|
-
|
|
55
|
-
<div className="flex flex-col pb-3 gap-2">
|
|
56
|
-
{secondaryBtn.map((btn, index) => (
|
|
57
|
-
<a key={index} href={btn.cta_link} className="group/btn px-2 justify-around cursor-pointer ">
|
|
58
|
-
|
|
59
|
-
<div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
|
|
60
|
-
<div
|
|
61
|
-
className="flex w-full justify-between items-center z-[2] py-2.5"
|
|
62
|
-
>
|
|
63
|
-
<div
|
|
64
|
-
className="flex rounded-lg gap-2 items-center ">
|
|
65
|
-
{btn.cta_leftVariantIcon && (
|
|
66
|
-
<Icon
|
|
67
|
-
height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 '}
|
|
68
|
-
variant={btn.cta_leftVariantIcon}
|
|
69
|
-
strokeClass='stroke-neutral-500'
|
|
70
|
-
/>
|
|
71
|
-
)}
|
|
72
|
-
|
|
73
|
-
<Typography
|
|
74
|
-
textStyle='body3c-medium'
|
|
75
|
-
className='text-neutral-1000 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
|
|
76
|
-
{btn.cta_text}
|
|
77
|
-
</Typography>
|
|
78
|
-
</div>
|
|
79
|
-
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
80
|
-
<Icon
|
|
81
|
-
height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out '}
|
|
82
|
-
variant={'chevronright'}
|
|
83
|
-
strokeClass={'stroke-blue-500'}
|
|
84
|
-
/>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</a>))}
|
|
91
|
-
|
|
92
|
-
{tertiaryBtn && tertiaryBtn.map((t, index) => (
|
|
93
|
-
<a key={index} href={t.cta_link} className="group/btn justify-around cursor-pointer px-2 ">
|
|
94
|
-
|
|
95
|
-
<div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
|
|
96
|
-
<div className="flex w-full justify-between items-center z-[2] py-2.5">
|
|
97
|
-
<div
|
|
98
|
-
className="flex rounded-lg gap-2 items-center ">
|
|
99
|
-
{t.cta_leftVariantIcon && (
|
|
100
|
-
<Icon
|
|
101
|
-
height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 '}
|
|
102
|
-
variant={t.cta_leftVariantIcon}
|
|
103
|
-
strokeClass='stroke-neutral-500'
|
|
104
|
-
/>
|
|
105
|
-
)}
|
|
106
|
-
|
|
107
|
-
<Typography
|
|
108
|
-
textStyle='body3c-medium'
|
|
109
|
-
className='text-neutral-1000 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
|
|
110
|
-
{t.cta_text}
|
|
111
|
-
</Typography>
|
|
112
|
-
</div>
|
|
113
|
-
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
114
|
-
<Icon
|
|
115
|
-
height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out '}
|
|
116
|
-
variant={'chevronright'}
|
|
117
|
-
strokeClass={'stroke-blue-500'}
|
|
118
|
-
/>
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
</a>))}
|
|
99
|
+
</div>
|
|
125
100
|
</div>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
101
|
+
</a>
|
|
102
|
+
))}
|
|
103
|
+
{tertiaryBtn &&
|
|
104
|
+
tertiaryBtn.map((t, index) => (
|
|
105
|
+
<a
|
|
106
|
+
key={index}
|
|
107
|
+
href={t.cta_link}
|
|
108
|
+
className="group/btn justify-around cursor-pointer px-2 "
|
|
109
|
+
>
|
|
110
|
+
<div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
|
|
111
|
+
<div className="flex w-full justify-between items-center z-[2] py-2.5">
|
|
112
|
+
<div className="flex rounded-lg gap-2 items-center ">
|
|
113
|
+
{t.cta_leftVariantIcon && (
|
|
114
|
+
<Icon
|
|
115
|
+
height={
|
|
116
|
+
"h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 "
|
|
117
|
+
}
|
|
118
|
+
variant={t.cta_leftVariantIcon}
|
|
119
|
+
strokeClass="stroke-neutral-500"
|
|
120
|
+
/>
|
|
121
|
+
)}
|
|
122
|
+
|
|
123
|
+
<Typography
|
|
124
|
+
textStyle="body3c-medium"
|
|
125
|
+
className="text-neutral-1000 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
126
|
+
>
|
|
127
|
+
{t.cta_text}
|
|
128
|
+
</Typography>
|
|
129
|
+
</div>
|
|
130
|
+
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
131
|
+
<Icon
|
|
132
|
+
height={
|
|
133
|
+
"h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out "
|
|
134
|
+
}
|
|
135
|
+
variant={"chevronright"}
|
|
136
|
+
strokeClass={"stroke-blue-500"}
|
|
137
|
+
/>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
</a>
|
|
142
|
+
))}
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
);
|
|
129
146
|
}
|
|
@@ -1,85 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Typography } from "../../../foundation/Typography";
|
|
3
|
-
import { Icon } from "../../common-components";
|
|
4
2
|
|
|
5
|
-
export default function FlyoutD(
|
|
3
|
+
export default function FlyoutD() {
|
|
6
4
|
return (
|
|
7
|
-
<div className="
|
|
8
|
-
<a
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{/* <div className=" p-2.5 rounded-2xl w-14 h-14 tb-l:w-full tb-xl:w-[175px] tb-l:h-[124px] bg-neutral-150 items-center justify-center transition-all duration-300 flex group-hover/icon:bg-blue-200">
|
|
15
|
-
<Icon
|
|
16
|
-
height=" tb-l:h-12 tb-l:w-12 h-6 w-6"
|
|
17
|
-
variant={props.IconVariant}
|
|
18
|
-
className=" stroke-neutral-800 group-hover/icon:stroke-blue-600 cursor-pointer transition-all duration-300"
|
|
19
|
-
/>
|
|
20
|
-
</div> */}
|
|
21
|
-
<img
|
|
22
|
-
src={`https://res.cloudinary.com/dh8fp23nd/image/upload/v1712003758/v3-federation_1_hmumso.png`}
|
|
23
|
-
className=" rounded-lg w-14 h-14 tb-l:w-full tb-xl:min-w-[175px] tb-l:h-[124px] flex border border-neutral-200 bg-blue-200"
|
|
24
|
-
alt="hasura-ddn-illus"
|
|
25
|
-
/>
|
|
26
|
-
</div>
|
|
27
|
-
)}
|
|
28
|
-
<div className="flex flex-col gap-1 w-full h-full">
|
|
29
|
-
{props.btnLabel && (
|
|
30
|
-
<div className="flex items-center">
|
|
31
|
-
<Typography
|
|
32
|
-
textStyle="body3c-medium"
|
|
33
|
-
className="text-neutral-900 whitespace-nowrap group-hover/icon:text-blue-600 transition-all duration-300 "
|
|
34
|
-
>
|
|
35
|
-
{props.btnLabel}
|
|
36
|
-
</Typography>
|
|
37
|
-
</div>
|
|
38
|
-
)}
|
|
39
|
-
{props.description && (
|
|
40
|
-
<div>
|
|
41
|
-
<Typography
|
|
42
|
-
textStyle="body3c"
|
|
43
|
-
className="text-neutral-600 line-clamp-5"
|
|
44
|
-
>
|
|
45
|
-
{props.description}
|
|
46
|
-
</Typography>
|
|
47
|
-
</div>
|
|
48
|
-
)}
|
|
49
|
-
</div>
|
|
50
|
-
</a>
|
|
51
|
-
<a
|
|
52
|
-
href={`https://hasura.io/blog/announcing-hasura-data-delivery-network-beta`}
|
|
53
|
-
className="w-full mt-4 inline-block pr-6 ml-3"
|
|
54
|
-
>
|
|
55
|
-
<div className="flex group/icon py-2 pr-3 rounded-lg flex-row w-full justify-between tb:min-w-[150px] items-center hover:bg-neutral-100 pl-3">
|
|
56
|
-
<div className="flex gap-2 flex-row items-center">
|
|
57
|
-
<div className="flex rounded-lg items-center group-hover:bg-white">
|
|
58
|
-
<Icon
|
|
59
|
-
height={
|
|
60
|
-
"h-5 w-5 stroke-2 " + "group-hover/icon:stroke-blue-500 "
|
|
61
|
-
}
|
|
62
|
-
variant={`bookopen01`}
|
|
63
|
-
strokeClass={`stroke-neutral-500`}
|
|
64
|
-
/>
|
|
65
|
-
</div>
|
|
66
|
-
<Typography
|
|
67
|
-
textStyle="body3c-medium"
|
|
68
|
-
className="text-neutral-1000 group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
69
|
-
>
|
|
70
|
-
Read announcement
|
|
71
|
-
</Typography>
|
|
72
|
-
</div>
|
|
73
|
-
<div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
74
|
-
<Icon
|
|
75
|
-
height={
|
|
76
|
-
"h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out "
|
|
77
|
-
}
|
|
78
|
-
variant={"chevronright"}
|
|
79
|
-
strokeClass={"stroke-blue-500"}
|
|
80
|
-
/>
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
5
|
+
<div className="">
|
|
6
|
+
<a href={`https://hasura.io/ddn`}>
|
|
7
|
+
<img
|
|
8
|
+
src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1716906625/Frame_12754_2_iaixzx.png"
|
|
9
|
+
alt="Hasura DDN"
|
|
10
|
+
className="w-full min-w-[204px] max-w-[204px] mt-2 tb-l:mt-0"
|
|
11
|
+
/>
|
|
83
12
|
</a>
|
|
84
13
|
</div>
|
|
85
14
|
);
|