hds-web 1.35.4 → 1.35.6
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 +2 -2
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +1 -1
- package/src/HDS/components/Cards/Menu/flyoutA.js +89 -83
- package/src/HDS/components/Cards/Menu/flyoutD.js +76 -35
- package/src/HDS/components/Headers/v3Header.js +93 -16
- package/src/HDS/helpers/AlgoliaSearch/search.js +19 -6
- package/src/styles/tailwind.css +8 -0
package/package.json
CHANGED
|
@@ -54,7 +54,7 @@ export default function DropdownA(props) {
|
|
|
54
54
|
} */}
|
|
55
55
|
{props.flyoutD && (
|
|
56
56
|
<>
|
|
57
|
-
<div className=" bg-neutral-0 shadow rounded-2xl w-full tb-l:w-[170px] tb-xl:w-[223px]
|
|
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
58
|
<div>
|
|
59
59
|
<FlyoutD {...props.flyoutD} />
|
|
60
60
|
</div>
|
|
@@ -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,51 +1,92 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Typography } from "../../../foundation/Typography";
|
|
3
3
|
import { Icon } from "../../common-components";
|
|
4
|
+
|
|
4
5
|
export default function FlyoutD(props) {
|
|
5
6
|
return (
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<div className="
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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"
|
|
17
25
|
/>
|
|
18
26
|
</div>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
+
|
|
38
|
+
<div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out invisible group-hover/icon:visible ">
|
|
39
|
+
<Icon
|
|
40
|
+
height={"h-4 w-4 stroke-2 transition-all ease-in-out "}
|
|
41
|
+
variant={"chevronright"}
|
|
42
|
+
strokeClass={"stroke-blue-500"}
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
)}
|
|
47
|
+
{props.description && (
|
|
24
48
|
<Typography
|
|
25
|
-
textStyle="body3c
|
|
26
|
-
className="text-neutral-
|
|
49
|
+
textStyle="body3c"
|
|
50
|
+
className="text-neutral-600 line-clamp-5"
|
|
27
51
|
>
|
|
28
|
-
{props.
|
|
52
|
+
{props.description}
|
|
29
53
|
</Typography>
|
|
30
|
-
|
|
31
|
-
|
|
54
|
+
)}
|
|
55
|
+
</div>
|
|
56
|
+
</a>
|
|
57
|
+
<a
|
|
58
|
+
href={`https://hasura.io/connectors`}
|
|
59
|
+
className="w-full mt-4 inline-block pr-6 ml-3"
|
|
60
|
+
>
|
|
61
|
+
<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">
|
|
62
|
+
<div className="flex gap-2 flex-row items-center">
|
|
63
|
+
<div className="flex rounded-lg items-center group-hover:bg-white">
|
|
32
64
|
<Icon
|
|
33
|
-
height={
|
|
34
|
-
|
|
35
|
-
|
|
65
|
+
height={
|
|
66
|
+
"h-5 w-5 stroke-2 " + "group-hover/icon:stroke-blue-500 "
|
|
67
|
+
}
|
|
68
|
+
variant={`route`}
|
|
69
|
+
strokeClass={`stroke-neutral-500`}
|
|
36
70
|
/>
|
|
37
71
|
</div>
|
|
72
|
+
<Typography
|
|
73
|
+
textStyle="body3c-medium"
|
|
74
|
+
className="text-neutral-1000 group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
75
|
+
>
|
|
76
|
+
Connectors
|
|
77
|
+
</Typography>
|
|
38
78
|
</div>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
79
|
+
<div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
80
|
+
<Icon
|
|
81
|
+
height={
|
|
82
|
+
"h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out "
|
|
83
|
+
}
|
|
84
|
+
variant={"chevronright"}
|
|
85
|
+
strokeClass={"stroke-blue-500"}
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
</a>
|
|
90
|
+
</div>
|
|
50
91
|
);
|
|
51
92
|
}
|
|
@@ -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
|
)}
|
|
@@ -542,16 +564,24 @@ V3Header.defaultProps = {
|
|
|
542
564
|
title: "Product",
|
|
543
565
|
primaryCard: {
|
|
544
566
|
iconVariant: "layersthree01",
|
|
545
|
-
mainDescription: `
|
|
546
|
-
primaryBtnLabel: "Hasura API
|
|
567
|
+
mainDescription: `Discover Hasura's core capabilities for automating the building, securing, optimizing, and deploying of APIs.`,
|
|
568
|
+
primaryBtnLabel: "Hasura Data API Platform",
|
|
547
569
|
primaryBtnCTA: "/products",
|
|
548
570
|
strokeClass: "stroke-neutral-800",
|
|
549
|
-
|
|
571
|
+
tertiaryBtn: [
|
|
550
572
|
{
|
|
551
573
|
cta_leftVariantIcon: "checksquarebroken",
|
|
552
574
|
cta_leftVariantIconColor: "#6C737F",
|
|
553
575
|
cta_text: "Compare Plans",
|
|
554
|
-
cta_link: "/pricing
|
|
576
|
+
cta_link: "/pricing",
|
|
577
|
+
},
|
|
578
|
+
],
|
|
579
|
+
secondaryBtn: [
|
|
580
|
+
{
|
|
581
|
+
cta_leftVariantIcon: "zap",
|
|
582
|
+
cta_leftVariantIconColor: "#6C737F",
|
|
583
|
+
cta_text: "Deployment Options",
|
|
584
|
+
cta_link: "/products/deployment",
|
|
555
585
|
},
|
|
556
586
|
],
|
|
557
587
|
},
|
|
@@ -560,36 +590,84 @@ V3Header.defaultProps = {
|
|
|
560
590
|
childArray: [
|
|
561
591
|
{
|
|
562
592
|
description: "",
|
|
563
|
-
href: "/
|
|
564
|
-
icon: "
|
|
565
|
-
name: "
|
|
593
|
+
href: "/products/instant-api",
|
|
594
|
+
icon: "lightning01",
|
|
595
|
+
name: "Instant API",
|
|
566
596
|
strokeClass: "stroke-neutral-500",
|
|
567
597
|
},
|
|
598
|
+
{
|
|
599
|
+
description: "",
|
|
600
|
+
href: "/products/authorization",
|
|
601
|
+
icon: "eye",
|
|
602
|
+
name: "Authorization",
|
|
603
|
+
strokeClass: "stroke-neutral-500",
|
|
604
|
+
},
|
|
605
|
+
{
|
|
606
|
+
description: "",
|
|
607
|
+
href: "/products/performance",
|
|
608
|
+
icon: "speedometer03",
|
|
609
|
+
name: "Performance",
|
|
610
|
+
strokeClass: "stroke-neutral-500",
|
|
611
|
+
},
|
|
612
|
+
{
|
|
613
|
+
description: "",
|
|
614
|
+
href: "/products/federation",
|
|
615
|
+
icon: "data",
|
|
616
|
+
name: "Federation",
|
|
617
|
+
strokeClass: "stroke-neutral-500",
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
description: "",
|
|
621
|
+
href: "/products/api-security",
|
|
622
|
+
icon: "shieldtick",
|
|
623
|
+
name: "API Security",
|
|
624
|
+
strokeClass: "stroke-neutral-500",
|
|
625
|
+
},
|
|
626
|
+
{
|
|
627
|
+
description: "",
|
|
628
|
+
href: "/products/observability",
|
|
629
|
+
icon: "piechart01",
|
|
630
|
+
name: "Observability",
|
|
631
|
+
strokeClass: "stroke-neutral-500",
|
|
632
|
+
},
|
|
633
|
+
],
|
|
634
|
+
label: "CAPABILITIES",
|
|
635
|
+
},
|
|
636
|
+
{
|
|
637
|
+
childArray: [
|
|
568
638
|
{
|
|
569
639
|
description: "",
|
|
570
640
|
href: "/graphql/database",
|
|
571
641
|
icon: "database01",
|
|
572
|
-
name: "All
|
|
642
|
+
name: "All Databases",
|
|
573
643
|
strokeClass: "stroke-neutral-500",
|
|
574
644
|
},
|
|
575
645
|
{
|
|
576
646
|
description: "",
|
|
577
647
|
href: "/graphql/database?category=planned",
|
|
578
|
-
icon: "
|
|
579
|
-
name: "Planned
|
|
648
|
+
icon: "checksquare",
|
|
649
|
+
name: "Planned Databases",
|
|
580
650
|
strokeClass: "stroke-neutral-500",
|
|
581
651
|
},
|
|
582
652
|
],
|
|
583
|
-
label: "
|
|
653
|
+
label: "Data sources",
|
|
584
654
|
},
|
|
585
655
|
],
|
|
586
656
|
flyoutD: {
|
|
587
|
-
link: "https://hasura.io/
|
|
588
|
-
cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1711965728/ai-img_bhy2bz.png`,
|
|
657
|
+
link: "https://hasura.io/ddn",
|
|
589
658
|
IconVariant: "aibot",
|
|
590
|
-
btnLabel: "
|
|
659
|
+
btnLabel: "Hasura DDN Beta",
|
|
591
660
|
description:
|
|
592
|
-
"
|
|
661
|
+
"Enable your backend team to deliver an incredible unified API on all your data effortlessly.",
|
|
662
|
+
childArray: [
|
|
663
|
+
{
|
|
664
|
+
description: "",
|
|
665
|
+
href: "/products/instant-api",
|
|
666
|
+
icon: "lightning01",
|
|
667
|
+
name: "Instant API",
|
|
668
|
+
strokeClass: "stroke-neutral-500",
|
|
669
|
+
},
|
|
670
|
+
],
|
|
593
671
|
},
|
|
594
672
|
},
|
|
595
673
|
{
|
|
@@ -790,7 +868,6 @@ V3Header.defaultProps = {
|
|
|
790
868
|
label: "Company",
|
|
791
869
|
},
|
|
792
870
|
],
|
|
793
|
-
|
|
794
871
|
tertiaryCard: [
|
|
795
872
|
{
|
|
796
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
|
@@ -6795,6 +6795,10 @@ select{
|
|
|
6795
6795
|
padding-top: 81px;
|
|
6796
6796
|
}
|
|
6797
6797
|
|
|
6798
|
+
.pr-6{
|
|
6799
|
+
padding-right: 1.5rem;
|
|
6800
|
+
}
|
|
6801
|
+
|
|
6798
6802
|
.text-left{
|
|
6799
6803
|
text-align: left;
|
|
6800
6804
|
}
|
|
@@ -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){
|