hds-web 1.35.5 → 1.35.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.css +1 -1
- package/dist/index.es.css +1 -1
- package/dist/index.es.js +4 -4
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +72 -79
- package/src/HDS/components/Cards/Menu/flyoutA.js +89 -83
- package/src/HDS/components/Cards/Menu/flyoutD.js +79 -36
- package/src/HDS/components/Headers/v3Header.js +34 -4
- package/src/HDS/helpers/AlgoliaSearch/search.js +19 -6
- package/src/styles/tailwind.css +8 -0
package/package.json
CHANGED
|
@@ -1,34 +1,36 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
import { HDSColor } from "../../../foundation/ColorPalette"
|
|
3
|
-
import { FlyoutB, FlyoutA, FlyoutC, FlyoutD } from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
3
|
+
import { FlyoutB, FlyoutA, FlyoutC, FlyoutD } from "../Menu";
|
|
4
4
|
|
|
5
5
|
export default function DropdownA(props) {
|
|
6
6
|
return (
|
|
7
7
|
<div>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
{props.primaryCard &&
|
|
8
|
+
<div className="tb-l:flex mb-2 tb-l:mb-0 flex w-full tb-l:bg-neutral-150 flex-col tb-l:flex-row max-w-7xl tb-l:gap-2 rounded-2xl ">
|
|
9
|
+
{props.primaryCard && (
|
|
12
10
|
<div className="">
|
|
13
|
-
<div className=
|
|
14
|
-
<FlyoutB
|
|
15
|
-
{...props.primaryCard}
|
|
16
|
-
/>
|
|
11
|
+
<div className=" bg-neutral-0 rounded-2xl h-full w-full min-w-[250px]">
|
|
12
|
+
<FlyoutB {...props.primaryCard} />
|
|
17
13
|
</div>
|
|
18
|
-
|
|
19
14
|
</div>
|
|
20
|
-
}
|
|
15
|
+
)}
|
|
21
16
|
<div className="tb-l:flex-row tb-l:flex mt-2 flex flex-col gap-2 tb-l:mt-0">
|
|
22
|
-
{props.secondaryCardArr &&
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
17
|
+
{props.secondaryCardArr &&
|
|
18
|
+
props.secondaryCardArr.map((item, index) => (
|
|
19
|
+
<div
|
|
20
|
+
key={index}
|
|
21
|
+
className={
|
|
22
|
+
"rounded-2xl " + item.card_bg
|
|
23
|
+
? "bg-neutral-0 rounded-2xl"
|
|
24
|
+
: HDSColor(item.card_bg)
|
|
25
|
+
}
|
|
26
|
+
>
|
|
27
|
+
<FlyoutA
|
|
28
|
+
label={item.label}
|
|
29
|
+
childArray={item.childArray}
|
|
30
|
+
split={item.split}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
))}
|
|
32
34
|
</div>
|
|
33
35
|
{/* {props.tertiaryCard && <div className="mt-2 pl-2 tb:mt-0">
|
|
34
36
|
|
|
@@ -50,65 +52,56 @@ export default function DropdownA(props) {
|
|
|
50
52
|
</div>
|
|
51
53
|
</div>
|
|
52
54
|
} */}
|
|
53
|
-
{props.flyoutD &&
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<FlyoutD
|
|
59
|
-
{...props.flyoutD}
|
|
60
|
-
/>
|
|
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} />
|
|
61
60
|
</div>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
|
|
61
|
+
</div>
|
|
62
|
+
</>
|
|
63
|
+
)}
|
|
68
64
|
</div>
|
|
69
65
|
</div>
|
|
70
|
-
)
|
|
66
|
+
);
|
|
71
67
|
}
|
|
72
68
|
|
|
73
69
|
DropdownA.defaultProps = {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
]
|
|
114
|
-
}
|
|
70
|
+
secondaryCardArr: [
|
|
71
|
+
{
|
|
72
|
+
childArray: [
|
|
73
|
+
{
|
|
74
|
+
description: "",
|
|
75
|
+
href: "#",
|
|
76
|
+
icon: "cube01",
|
|
77
|
+
name: "Analytics",
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
description: "",
|
|
81
|
+
href: "#",
|
|
82
|
+
icon: "cube01",
|
|
83
|
+
name: "Engagement",
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
description: "",
|
|
87
|
+
href: "#",
|
|
88
|
+
icon: "cube01",
|
|
89
|
+
name: "Security",
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
description: "",
|
|
93
|
+
href: "#",
|
|
94
|
+
icon: "cube01",
|
|
95
|
+
name: "Security",
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
description: "",
|
|
99
|
+
href: "#",
|
|
100
|
+
icon: "cube01",
|
|
101
|
+
name: "Security",
|
|
102
|
+
},
|
|
103
|
+
],
|
|
104
|
+
label: "Label1",
|
|
105
|
+
},
|
|
106
|
+
],
|
|
107
|
+
};
|
|
@@ -1,60 +1,70 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Fragment } from
|
|
3
|
-
import { Popover, Transition } from
|
|
4
|
-
import { Icon } from
|
|
5
|
-
import { Typography } from
|
|
2
|
+
import { Fragment } from "react";
|
|
3
|
+
import { Popover, Transition } from "@headlessui/react";
|
|
4
|
+
import { Icon } from "../../common-components/Icon";
|
|
5
|
+
import { Typography } from "../../../foundation/Typography";
|
|
6
6
|
export default function FlyoutA(props) {
|
|
7
|
-
const {
|
|
8
|
-
split
|
|
9
|
-
} = props
|
|
7
|
+
const { split } = props;
|
|
10
8
|
const cardLayout = (label, childArray) => (
|
|
11
9
|
<div className=" group h-full ">
|
|
12
|
-
<div className={`w-full h-full ` + (split ?
|
|
10
|
+
<div className={`w-full h-full ` + (split ? " " : " rounded-2xl")}>
|
|
13
11
|
<div className={`w-full tb-l:max-w-[250px] p-6 `}>
|
|
14
12
|
{label ? (
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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>
|
|
20
19
|
) : (
|
|
21
|
-
<div className="mb-9">
|
|
22
|
-
</div>
|
|
20
|
+
<div className="mb-9"></div>
|
|
23
21
|
)}
|
|
24
|
-
<div
|
|
25
|
-
{
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
22
|
+
<div
|
|
23
|
+
className={` tb:tb:grid tb:tb:grid-cols-1 tb:gap-x-4 tb:min-w-[186px] `}
|
|
24
|
+
>
|
|
25
|
+
{childArray &&
|
|
26
|
+
childArray.map((item) => (
|
|
27
|
+
<div
|
|
28
|
+
key={item.name}
|
|
29
|
+
className="relative pb-2 flex rounded-lg items-center"
|
|
30
|
+
>
|
|
31
|
+
<a href={item.href} className="w-full">
|
|
32
|
+
<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-[150px] items-center">
|
|
33
|
+
<div className="flex gap-2 flex-row items-center">
|
|
34
|
+
<div className="flex rounded-lg items-center group-hover:bg-white">
|
|
35
|
+
{item.icon && (
|
|
36
|
+
<Icon
|
|
37
|
+
height={
|
|
38
|
+
"h-5 w-5 stroke-2 " +
|
|
39
|
+
(item.icon === "discord" ||
|
|
40
|
+
item.icon === "octoface" ||
|
|
41
|
+
item.icon === "meetup"
|
|
42
|
+
? ""
|
|
43
|
+
: "group-hover/icon:stroke-blue-500 ")
|
|
44
|
+
}
|
|
45
|
+
variant={item.icon}
|
|
46
|
+
strokeClass={item.strokeClass}
|
|
47
|
+
/>
|
|
48
|
+
)}
|
|
49
|
+
</div>
|
|
50
|
+
<Typography
|
|
51
|
+
textStyle="body3c-medium"
|
|
52
|
+
className="text-neutral-1000 group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
53
|
+
>
|
|
54
|
+
{item.name}
|
|
55
|
+
</Typography>
|
|
56
|
+
</div>
|
|
57
|
+
<div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
58
|
+
<Icon
|
|
59
|
+
height={
|
|
60
|
+
"h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out "
|
|
61
|
+
}
|
|
62
|
+
variant={"chevronright"}
|
|
63
|
+
strokeClass={"stroke-blue-500"}
|
|
64
|
+
/>
|
|
41
65
|
</div>
|
|
42
|
-
<Typography
|
|
43
|
-
textStyle='body3c-medium'
|
|
44
|
-
className='text-neutral-1000 group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
|
|
45
|
-
{item.name}
|
|
46
|
-
</Typography>
|
|
47
|
-
</div>
|
|
48
|
-
<div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
49
|
-
<Icon
|
|
50
|
-
height={'h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out '}
|
|
51
|
-
variant={'chevronright'}
|
|
52
|
-
strokeClass={'stroke-blue-500'}
|
|
53
|
-
/>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
66
|
|
|
57
|
-
|
|
67
|
+
{/* {item.description &&
|
|
58
68
|
item.description.length > 0 && (
|
|
59
69
|
<Typography
|
|
60
70
|
textStyle='body3c-medium'
|
|
@@ -62,15 +72,13 @@ export default function FlyoutA(props) {
|
|
|
62
72
|
{item.description}
|
|
63
73
|
</Typography>
|
|
64
74
|
)} */}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
75
|
+
</div>
|
|
76
|
+
</a>
|
|
77
|
+
</div>
|
|
78
|
+
))}
|
|
69
79
|
</div>
|
|
70
80
|
</div>
|
|
71
|
-
<div
|
|
72
|
-
className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50"
|
|
73
|
-
>
|
|
81
|
+
<div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
|
|
74
82
|
{/* {buttonArray && buttonArray.map((item) => (
|
|
75
83
|
<a
|
|
76
84
|
key={item.name}
|
|
@@ -94,40 +102,38 @@ export default function FlyoutA(props) {
|
|
|
94
102
|
</div>
|
|
95
103
|
</div>
|
|
96
104
|
</div>
|
|
97
|
-
)
|
|
105
|
+
);
|
|
98
106
|
|
|
99
107
|
return (
|
|
100
108
|
<>
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
<div className="shadow group/split rounded-r-2xl">
|
|
113
|
-
|
|
114
|
-
{cardLayout(null, props.childArray.slice(Math.ceil(props.childArray.length / 2)))}
|
|
115
|
-
</div>
|
|
109
|
+
{split ? (
|
|
110
|
+
<>
|
|
111
|
+
<div className="hds-hidden tb-l:flex h-full">
|
|
112
|
+
<div className="border-r border-neutral-150 shadow rounded-l-2xl">
|
|
113
|
+
{cardLayout(
|
|
114
|
+
props.label,
|
|
115
|
+
props.childArray.slice(
|
|
116
|
+
0,
|
|
117
|
+
Math.ceil(props.childArray.length / 2)
|
|
118
|
+
)
|
|
119
|
+
)}
|
|
116
120
|
</div>
|
|
117
|
-
<div className="
|
|
118
|
-
{cardLayout(
|
|
121
|
+
<div className="shadow group/split rounded-r-2xl">
|
|
122
|
+
{cardLayout(
|
|
123
|
+
null,
|
|
124
|
+
props.childArray.slice(Math.ceil(props.childArray.length / 2))
|
|
125
|
+
)}
|
|
119
126
|
</div>
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
: (
|
|
124
|
-
<div className=" shadow h-full rounded-2xl">
|
|
127
|
+
</div>
|
|
128
|
+
<div className="hds-hidden-tbl shadow h-full rounded-2xl">
|
|
125
129
|
{cardLayout(props.label, props.childArray)}
|
|
126
130
|
</div>
|
|
127
|
-
|
|
128
|
-
|
|
131
|
+
</>
|
|
132
|
+
) : (
|
|
133
|
+
<div className=" shadow h-full rounded-2xl">
|
|
134
|
+
{cardLayout(props.label, props.childArray)}
|
|
135
|
+
</div>
|
|
136
|
+
)}
|
|
129
137
|
</>
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
}
|
|
138
|
+
);
|
|
139
|
+
}
|
|
@@ -1,43 +1,86 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Typography } from "../../../foundation/Typography";
|
|
3
3
|
import { Icon } from "../../common-components";
|
|
4
|
-
export default function FlyoutD(props) {
|
|
5
|
-
return (
|
|
6
|
-
<a href={props.link} className="flex flex-col gap-4 tb-l:gap-0 tb-l:flex-col w-full h-full justify-between group/icon">
|
|
7
|
-
{props.IconVariant &&
|
|
8
|
-
<div className="w-full h-full tb-l:pb-6">
|
|
9
4
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
5
|
+
export default function FlyoutD(props) {
|
|
6
|
+
return (
|
|
7
|
+
<div className="flex flex-col justify-between">
|
|
8
|
+
<a
|
|
9
|
+
href={props.link}
|
|
10
|
+
className="flex flex-col gap-4 tb-l:gap-0 tb-l:flex-col w-full h-full justify-between group/icon px-6 "
|
|
11
|
+
>
|
|
12
|
+
{props.IconVariant && (
|
|
13
|
+
<div className="w-full h-full tb-l:pb-6">
|
|
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>
|
|
19
37
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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 "
|
|
36
61
|
}
|
|
37
|
-
{
|
|
38
|
-
|
|
39
|
-
|
|
62
|
+
variant={`bookopen01`}
|
|
63
|
+
strokeClass={`stroke-neutral-500`}
|
|
64
|
+
/>
|
|
40
65
|
</div>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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>
|
|
83
|
+
</a>
|
|
84
|
+
</div>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
@@ -21,6 +21,7 @@ const updatePGParam = (originalLink, websiteKey) => {
|
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
const isBrowser = typeof window !== "undefined";
|
|
24
|
+
|
|
24
25
|
export default function V3Header(props) {
|
|
25
26
|
const listSize = props.HEADER_LIST.length;
|
|
26
27
|
const [mobileNavOpen, setmobileNavOpen] = useState(false);
|
|
@@ -483,6 +484,27 @@ export default function V3Header(props) {
|
|
|
483
484
|
/>
|
|
484
485
|
</div>
|
|
485
486
|
))}
|
|
487
|
+
<a href="https://hasura.io/contact-us">
|
|
488
|
+
<div
|
|
489
|
+
key={`Contact`}
|
|
490
|
+
className="flex justify-between items-center p-4 cursor-pointer group"
|
|
491
|
+
>
|
|
492
|
+
<div className="flex items-center justify-center gap-2">
|
|
493
|
+
{/* <Icon height="h-5 w-5" variant="home03" strokeColor="#3970FD" /> */}
|
|
494
|
+
<Typography
|
|
495
|
+
textStyle="body3c-medium"
|
|
496
|
+
className="text-neutral-700 hover:text-neutral-1000 transition-all duration-300 ease-in-out"
|
|
497
|
+
>
|
|
498
|
+
Contact Us
|
|
499
|
+
</Typography>
|
|
500
|
+
</div>
|
|
501
|
+
<Icon
|
|
502
|
+
height="h-5 w-5 stroke-[1.5px] group-hover:translate-x-1 ease-in-out transition duration-300"
|
|
503
|
+
variant="chevronright"
|
|
504
|
+
strokeClass="stroke-neutral-500"
|
|
505
|
+
/>
|
|
506
|
+
</div>
|
|
507
|
+
</a>
|
|
486
508
|
</nav>
|
|
487
509
|
</motion.div>
|
|
488
510
|
)}
|
|
@@ -632,11 +654,20 @@ V3Header.defaultProps = {
|
|
|
632
654
|
},
|
|
633
655
|
],
|
|
634
656
|
flyoutD: {
|
|
635
|
-
link: "https://hasura.io/
|
|
657
|
+
link: "https://hasura.io/ddn",
|
|
636
658
|
IconVariant: "aibot",
|
|
637
|
-
btnLabel: "
|
|
659
|
+
btnLabel: "The future of data delivery",
|
|
638
660
|
description:
|
|
639
|
-
"
|
|
661
|
+
"Introducing Hasura Data Delivery Network – a new way to ship amazing APIs on all data!",
|
|
662
|
+
childArray: [
|
|
663
|
+
{
|
|
664
|
+
description: "",
|
|
665
|
+
href: "/products/instant-api",
|
|
666
|
+
icon: "lightning01",
|
|
667
|
+
name: "Instant API",
|
|
668
|
+
strokeClass: "stroke-neutral-500",
|
|
669
|
+
},
|
|
670
|
+
],
|
|
640
671
|
},
|
|
641
672
|
},
|
|
642
673
|
{
|
|
@@ -837,7 +868,6 @@ V3Header.defaultProps = {
|
|
|
837
868
|
label: "Company",
|
|
838
869
|
},
|
|
839
870
|
],
|
|
840
|
-
|
|
841
871
|
tertiaryCard: [
|
|
842
872
|
{
|
|
843
873
|
title: "HasuraCon 2023 is here!",
|
|
@@ -3,10 +3,9 @@ import { useEffect, useState } from "react";
|
|
|
3
3
|
import SearchOverlay from "./searchoverlay";
|
|
4
4
|
import { Icon } from "../../components/common-components";
|
|
5
5
|
export default function Search(props) {
|
|
6
|
-
|
|
7
6
|
const [showSearch, setShowSearch] = useState(false);
|
|
8
7
|
|
|
9
|
-
const handleSearchWithKeyboard = e => {
|
|
8
|
+
const handleSearchWithKeyboard = (e) => {
|
|
10
9
|
if (e.key === "/" || e.key === "Escape") {
|
|
11
10
|
e.preventDefault();
|
|
12
11
|
if (e.key === "/") return setShowSearch(true);
|
|
@@ -25,17 +24,31 @@ export default function Search(props) {
|
|
|
25
24
|
}, []);
|
|
26
25
|
|
|
27
26
|
const onCloseSearch = () => setShowSearch(false);
|
|
27
|
+
|
|
28
28
|
return (
|
|
29
29
|
<>
|
|
30
30
|
<div className="">
|
|
31
31
|
<div className="max-w-7xl mx-auto">
|
|
32
|
-
<div
|
|
32
|
+
<div
|
|
33
|
+
className="w-full cursor-pointer gap-0.5 flex items-center"
|
|
34
|
+
onClick={() => {
|
|
35
|
+
setShowSearch((preShowSearch) => !preShowSearch);
|
|
36
|
+
}}
|
|
37
|
+
>
|
|
33
38
|
<p className="-mt-1">/ </p>
|
|
34
|
-
<Icon
|
|
39
|
+
<Icon
|
|
40
|
+
height={"h-4 w-4 stroke-2"}
|
|
41
|
+
variant={`searchsm`}
|
|
42
|
+
strokeClass="stroke-neutral-1000"
|
|
43
|
+
/>
|
|
35
44
|
</div>
|
|
36
45
|
</div>
|
|
37
46
|
</div>
|
|
38
|
-
<SearchOverlay
|
|
47
|
+
<SearchOverlay
|
|
48
|
+
showSearch={showSearch}
|
|
49
|
+
onCloseSearch={onCloseSearch}
|
|
50
|
+
{...props}
|
|
51
|
+
/>
|
|
39
52
|
</>
|
|
40
53
|
);
|
|
41
|
-
}
|
|
54
|
+
}
|
package/src/styles/tailwind.css
CHANGED
|
@@ -6727,6 +6727,10 @@ select{
|
|
|
6727
6727
|
padding-right: 12rem;
|
|
6728
6728
|
}
|
|
6729
6729
|
|
|
6730
|
+
.pr-6{
|
|
6731
|
+
padding-right: 1.5rem;
|
|
6732
|
+
}
|
|
6733
|
+
|
|
6730
6734
|
.pr-7{
|
|
6731
6735
|
padding-right: 1.75rem;
|
|
6732
6736
|
}
|
|
@@ -12316,6 +12320,10 @@ select{
|
|
|
12316
12320
|
.tb-xl\:w-\[223px\]{
|
|
12317
12321
|
width: 223px;
|
|
12318
12322
|
}
|
|
12323
|
+
|
|
12324
|
+
.tb-xl\:min-w-\[175px\]{
|
|
12325
|
+
min-width: 175px;
|
|
12326
|
+
}
|
|
12319
12327
|
}
|
|
12320
12328
|
|
|
12321
12329
|
@media (min-width: 1024px){
|