hds-web 1.34.2 → 1.34.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/dist/index.es.js +1 -1
  2. package/dist/index.js +3 -3
  3. package/package.json +1 -1
  4. package/src/HDS/components/Headers/v3Header.js +842 -775
package/src/HDS/components/Headers/v3Header.js CHANGED
@@ -1,829 +1,896 @@
1
- import React, { useState, useEffect } from 'react';
2
- import { Icon } from '../common-components/Icon';
3
- import { Typography } from '../../foundation/Typography';
4
- import { HDSButton } from '../Buttons';
5
- import { V3Dropdown } from '../Cards/Dropdown'
6
- import { HDSColor } from '../../foundation/ColorPalette';
7
- import { motion } from "framer-motion"
8
- import { AnimatePresence } from 'framer-motion';
9
- import { AlgoliaSearch } from '../../helpers/AlgoliaSearch';
1
+ import React, { useState, useEffect } from "react";
2
+ import { motion, AnimatePresence } from "framer-motion";
3
+
4
+ import { Icon } from "../common-components/Icon";
5
+ import { Typography } from "../../foundation/Typography";
6
+ import { HDSButton } from "../Buttons";
7
+ import { V3Dropdown } from "../Cards/Dropdown";
8
+ import { HDSColor } from "../../foundation/ColorPalette";
9
+ import { AlgoliaSearch } from "../../helpers/AlgoliaSearch";
10
10
 
11
11
  function classNames(...classes) {
12
- return classes.filter(Boolean).join(' ')
12
+ return classes.filter(Boolean).join(" ");
13
13
  }
14
14
 
15
15
  const updatePGParam = (originalLink, websiteKey) => {
16
- if(websiteKey){
17
- const url = new URL(originalLink);
18
- url.searchParams.set("pg", websiteKey);
19
- return url.toString();
20
- }
21
- else return originalLink;
16
+ if (websiteKey) {
17
+ const url = new URL(originalLink);
18
+ url.searchParams.set("pg", websiteKey);
19
+ return url.toString();
20
+ } else return originalLink;
22
21
  };
23
22
 
24
-
23
+ const isBrowser = typeof window !== "undefined";
25
24
  export default function V3Header(props) {
26
- const listSize = props.HEADER_LIST.length;
27
- const [mobileNavOpen, setmobileNavOpen] = useState(false);
28
- const [isProduct, setIsProduct] = useState(false)
29
- const [isDeveloper, setIsDeveloper] = useState(false)
30
- const [isCompany, setIsCompany] = useState(false)
31
- const [currentTab, setCurrentTab] = useState('')
32
- const [isShown, setIsShown] = useState(false)
33
- const [isArrowActive, setIsArrowActive] = useState(false)
34
- const signUpLink = props.signUpLink ? props.signUpLink :'https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default';
35
- const logInLink = props.logInLink ? props.logInLink :'https://cloud.hasura.io/login?pg=sample-apps&plcmt=header&cta=log-in&tech=default'
36
- const signupURL = updatePGParam(signUpLink, props.website_key)
37
- const loginURL = updatePGParam(logInLink, props.website_key)
38
- const hideLoginButton = props.hideLoginButton;
39
- //testing
40
- const [dropdownVisibility, setDropdownVisibility] = useState(Array(props.HEADER_LIST.length).fill(false));
41
- const handleDropdownEnter = (index) => {
42
- setDropdownVisibility((prevVisibility) => {
43
- const updatedVisibility = [...prevVisibility];
44
- updatedVisibility[index] = true;
45
- return updatedVisibility;
46
- });
47
- };
48
-
49
- const handleDropdownLeave = (index) => {
50
- setDropdownVisibility((prevVisibility) => {
51
- const updatedVisibility = [...prevVisibility];
52
- updatedVisibility[index] = false;
53
- return updatedVisibility;
54
- });
55
- };
56
-
57
- const renderDropdown = (primaryCard, secondaryCardArr, tertiaryCard, flyoutD) => (
58
- <div>
59
- <div>
60
- <hr className="w-full h-6 border-0" />
61
- </div>
62
- <div className="p-2 bg-neutral-150 rounded-3xl">
63
- <V3Dropdown
64
- primaryCard={primaryCard}
65
- secondaryCardArr={secondaryCardArr}
66
- tertiaryCard={tertiaryCard}
67
- flyoutD={flyoutD}
68
- />
69
- </div>
70
- </div>
71
- );
72
-
73
- const renderDropdownContainer = (headerList, id) => {
74
- const { title, primaryCard, secondaryCardArr, tertiaryCard, flyoutD } = headerList[id];
75
-
76
- return (
77
- <div id={`dropdown_${id}`}>
78
- {headerList[id] && (
79
- <div
80
- className="relative"
81
- onMouseEnter={() => handleDropdownEnter(id)}
82
- onMouseLeave={() => handleDropdownLeave(id)}
83
- >
84
- <div
85
- className={classNames(
86
- 'group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
87
- dropdownVisibility[id] ? '' : 'text-gray-500'
88
- )}
89
- >
90
- <div className="flex flex-col items-center cursor-pointer">
91
- <Typography
92
- className="hover:text-blue-600"
93
- textStyle="body3c-medium"
94
- >
95
- {`${title} `}
96
- </Typography>
97
- </div>
98
- </div>
99
- <motion.div>
100
- {dropdownVisibility[id] && (
101
- <div
102
- id={`dropdown_${id}_content`}
103
- className="left-0 z-20"
104
- onMouseEnter={() => handleDropdownEnter(id)}
105
- onMouseLeave={() => handleDropdownLeave(id)}
106
- onScroll={() => handleDropdownLeave(id)}
107
- >
108
- <motion.div
109
- initial={{ opacity: 0 }}
110
- animate={{ opacity: 1 }}
111
- transition={{ ease: 'easeInOut', duration: 0.1 }}
112
- className={"absolute -left-[137px] z-[2] transform " + (dropdownVisibility[0] ? '-left-[137px] ' : '') + (dropdownVisibility[1] ? '-left-[218px]' : '') + (dropdownVisibility[3] ? '-left-[50px] ' : '')}
113
-
114
- >
115
- {renderDropdown(
116
- primaryCard,
117
- secondaryCardArr,
118
- tertiaryCard,
119
- flyoutD
120
- )}
121
- </motion.div>
122
- </div>
123
- )}
124
- </motion.div>
125
- </div>
126
- )}
127
- </div>
128
- );
129
- };
130
-
131
-
132
- const headerListfunction = (headerList) => (
133
- <>
134
- {renderDropdownContainer(headerList, 0)}
135
- {renderDropdownContainer(headerList, 1)}
136
- {<a href='/case-studies/'>
25
+ const listSize = props.HEADER_LIST.length;
26
+ const [mobileNavOpen, setmobileNavOpen] = useState(false);
27
+ const [isProduct, setIsProduct] = useState(false);
28
+ const [isDeveloper, setIsDeveloper] = useState(false);
29
+ const [isCompany, setIsCompany] = useState(false);
30
+ const [currentTab, setCurrentTab] = useState("");
31
+ const [isShown, setIsShown] = useState(false);
32
+ const [isArrowActive, setIsArrowActive] = useState(false);
33
+ const signUpLink = props.signUpLink
34
+ ? props.signUpLink
35
+ : "https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default";
36
+ const logInLink = props.logInLink
37
+ ? props.logInLink
38
+ : "https://cloud.hasura.io/login?pg=sample-apps&plcmt=header&cta=log-in&tech=default";
39
+ const signupURL = updatePGParam(signUpLink, props.website_key);
40
+ const loginURL = updatePGParam(logInLink, props.website_key);
41
+ const hideLoginButton = props.hideLoginButton;
42
+ //testing
43
+ const [dropdownVisibility, setDropdownVisibility] = useState(
44
+ Array(props.HEADER_LIST.length).fill(false)
45
+ );
46
+ const handleDropdownEnter = (index) => {
47
+ setDropdownVisibility((prevVisibility) => {
48
+ const updatedVisibility = [...prevVisibility];
49
+ updatedVisibility[index] = true;
50
+ return updatedVisibility;
51
+ });
52
+ };
53
+
54
+ const handleDropdownLeave = (index) => {
55
+ setDropdownVisibility((prevVisibility) => {
56
+ const updatedVisibility = [...prevVisibility];
57
+ updatedVisibility[index] = false;
58
+ return updatedVisibility;
59
+ });
60
+ };
61
+
62
+ const renderDropdown = (
63
+ primaryCard,
64
+ secondaryCardArr,
65
+ tertiaryCard,
66
+ flyoutD
67
+ ) => (
68
+ <div>
69
+ <div>
70
+ <hr className="w-full h-6 border-0" />
71
+ </div>
72
+ <div className="p-2 bg-neutral-150 rounded-3xl">
73
+ <V3Dropdown
74
+ primaryCard={primaryCard}
75
+ secondaryCardArr={secondaryCardArr}
76
+ tertiaryCard={tertiaryCard}
77
+ flyoutD={flyoutD}
78
+ />
79
+ </div>
80
+ </div>
81
+ );
82
+
83
+ const renderDropdownContainer = (headerList, id) => {
84
+ const { title, primaryCard, secondaryCardArr, tertiaryCard, flyoutD } =
85
+ headerList[id];
137
86
 
87
+ return (
88
+ <div id={`dropdown_${id}`}>
89
+ {headerList[id] && (
90
+ <div
91
+ className="relative"
92
+ onMouseEnter={() => handleDropdownEnter(id)}
93
+ onMouseLeave={() => handleDropdownLeave(id)}
94
+ >
95
+ <div
96
+ className={classNames(
97
+ "group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
98
+ dropdownVisibility[id] ? "" : "text-gray-500"
99
+ )}
100
+ >
101
+ <div className="flex flex-col items-center cursor-pointer">
138
102
  <Typography
139
- className="hover:text-blue-600 cursor-pointer"
140
- textStyle="body3c-medium"
103
+ className="hover:text-blue-600"
104
+ textStyle="body3c-medium"
141
105
  >
142
- {`Customers `}
106
+ {`${title} `}
143
107
  </Typography>
144
- </a>
145
- }
146
- {renderDropdownContainer(headerList, 3)}
147
-
148
- {<a href='/pricing'>
149
-
150
- <Typography
151
- className="hover:text-blue-600 cursor-pointer"
152
- textStyle="body3c-medium"
108
+ </div>
109
+ </div>
110
+ <motion.div>
111
+ {dropdownVisibility[id] && (
112
+ <div
113
+ id={`dropdown_${id}_content`}
114
+ className="left-0 z-20"
115
+ onMouseEnter={() => handleDropdownEnter(id)}
116
+ onMouseLeave={() => handleDropdownLeave(id)}
117
+ onScroll={() => handleDropdownLeave(id)}
153
118
  >
154
- {`Pricing `}
155
- </Typography>
156
- </a>
157
- }
158
- </>
119
+ <motion.div
120
+ initial={{ opacity: 0 }}
121
+ animate={{ opacity: 1 }}
122
+ transition={{ ease: "easeInOut", duration: 0.1 }}
123
+ className={
124
+ "absolute -left-[137px] z-[2] transform " +
125
+ (dropdownVisibility[0] ? "-left-[137px] " : "") +
126
+ (dropdownVisibility[1] ? "-left-[218px]" : "") +
127
+ (dropdownVisibility[3] ? "-left-[50px] " : "")
128
+ }
129
+ >
130
+ {renderDropdown(
131
+ primaryCard,
132
+ secondaryCardArr,
133
+ tertiaryCard,
134
+ flyoutD
135
+ )}
136
+ </motion.div>
137
+ </div>
138
+ )}
139
+ </motion.div>
140
+ </div>
141
+ )}
142
+ </div>
159
143
  );
160
-
161
-
162
- //testing
163
-
164
- const mobileNav = (HEADER_LIST) => (
165
- <div className='pt-4 '>
166
- <div className='transform transition-all'>
167
- {isProduct && (
168
- <motion.div
169
- className='product_mobile mr-0'>
170
-
171
- <V3Dropdown
172
- primaryCard={HEADER_LIST[0]['primaryCard']}
173
- secondaryCardArr={HEADER_LIST[0]['secondaryCardArr']}
174
- tertiaryCard={HEADER_LIST[0]['tertiaryCard']}
175
- flyoutD={HEADER_LIST[0]['flyoutD']}
176
- />
177
-
178
- </motion.div>)}
179
- {isDeveloper && (
180
- <div className='product_developer'>
181
- <V3Dropdown
182
- primaryCard={HEADER_LIST[1]['primaryCard']}
183
- secondaryCardArr={HEADER_LIST[1]['secondaryCardArr']}
184
- tertiaryCard={HEADER_LIST[1]['tertiaryCard']}
185
- />
186
- </div>)
187
- }
188
- {isCompany && (<div className='product_company'>
189
- <V3Dropdown
190
- primaryCard={HEADER_LIST[3]['primaryCard']}
191
- secondaryCardArr={HEADER_LIST[3]['secondaryCardArr']}
192
- tertiaryCard={HEADER_LIST[3]['tertiaryCard']}
193
- />
194
- </div>)}
195
- </div>
196
- </div>
197
- )
198
-
199
-
200
- let class1;
201
- let class2;
202
- let class3;
203
- if (mobileNavOpen) {
204
- class1 = "rotate-45 ";
205
- class2 = "opacity-0 ";
206
- class3 = "-rotate-45 ";
144
+ };
145
+
146
+ const headerListfunction = (headerList) => (
147
+ <>
148
+ {renderDropdownContainer(headerList, 0)}
149
+ {renderDropdownContainer(headerList, 1)}
150
+ {
151
+ <a href="/case-studies/">
152
+ <Typography
153
+ className="hover:text-blue-600 cursor-pointer"
154
+ textStyle="body3c-medium"
155
+ >
156
+ {`Customers `}
157
+ </Typography>
158
+ </a>
159
+ }
160
+ {renderDropdownContainer(headerList, 3)}
161
+
162
+ {
163
+ <a href="/pricing">
164
+ <Typography
165
+ className="hover:text-blue-600 cursor-pointer"
166
+ textStyle="body3c-medium"
167
+ >
168
+ {`Pricing `}
169
+ </Typography>
170
+ </a>
171
+ }
172
+ </>
173
+ );
174
+
175
+ //testing
176
+
177
+ const mobileNav = (HEADER_LIST) => (
178
+ <div className="pt-4 ">
179
+ <div className="transform transition-all">
180
+ {isProduct && (
181
+ <motion.div className="product_mobile mr-0">
182
+ <V3Dropdown
183
+ primaryCard={HEADER_LIST[0]["primaryCard"]}
184
+ secondaryCardArr={HEADER_LIST[0]["secondaryCardArr"]}
185
+ tertiaryCard={HEADER_LIST[0]["tertiaryCard"]}
186
+ flyoutD={HEADER_LIST[0]["flyoutD"]}
187
+ />
188
+ </motion.div>
189
+ )}
190
+ {isDeveloper && (
191
+ <div className="product_developer">
192
+ <V3Dropdown
193
+ primaryCard={HEADER_LIST[1]["primaryCard"]}
194
+ secondaryCardArr={HEADER_LIST[1]["secondaryCardArr"]}
195
+ tertiaryCard={HEADER_LIST[1]["tertiaryCard"]}
196
+ />
197
+ </div>
198
+ )}
199
+ {isCompany && (
200
+ <div className="product_company">
201
+ <V3Dropdown
202
+ primaryCard={HEADER_LIST[3]["primaryCard"]}
203
+ secondaryCardArr={HEADER_LIST[3]["secondaryCardArr"]}
204
+ tertiaryCard={HEADER_LIST[3]["tertiaryCard"]}
205
+ />
206
+ </div>
207
+ )}
208
+ </div>
209
+ </div>
210
+ );
211
+
212
+ let class1;
213
+ let class2;
214
+ let class3;
215
+ if (mobileNavOpen) {
216
+ class1 = "rotate-45 ";
217
+ class2 = "opacity-0 ";
218
+ class3 = "-rotate-45 ";
219
+ }
220
+ if (!mobileNavOpen) {
221
+ class1 = " ";
222
+ class2 = "";
223
+ class3 = "translate-y-[5.8px] ";
224
+ }
225
+
226
+ function handleMbDropdownClose() {
227
+ setmobileNavOpen(!mobileNavOpen);
228
+ setIsDeveloper(false);
229
+ setIsCompany(false);
230
+ setIsProduct(false);
231
+ setCurrentTab("");
232
+ props.HEADER_LIST.forEach((item, index) => {
233
+ // Access the values of each item and the index
234
+ handleDropdownLeave(index);
235
+ });
236
+ }
237
+ function handleBackClick() {
238
+ setIsDeveloper(false);
239
+ setIsCompany(false);
240
+ setIsProduct(false);
241
+ setCurrentTab("");
242
+ props.HEADER_LIST.forEach((item, index) => {
243
+ // Access the values of each item and the index
244
+ handleDropdownLeave(index);
245
+ });
246
+ }
247
+
248
+ function handleMbDropdownClick(title) {
249
+ const i = props.HEADER_LIST.findIndex((item) => item.title === title);
250
+ handleDropdownEnter(i);
251
+ // Implement your logic to open the additional options for the clicked dropdown
252
+ if (title === "Developer") {
253
+ setIsDeveloper(true);
207
254
  }
208
- if (!mobileNavOpen) {
209
- class1 = " ";
210
- class2 = "";
211
- class3 = "translate-y-[5.8px] ";
255
+ if (title === "Customers") {
256
+ window.location.href = "/case-studies/";
212
257
  }
213
-
214
- function handleMbDropdownClose() {
215
- setmobileNavOpen(!mobileNavOpen)
216
- setIsDeveloper(false);
217
- setIsCompany(false);
218
- setIsProduct(false);
219
- setCurrentTab('')
220
- props.HEADER_LIST.forEach((item, index) => {
221
- // Access the values of each item and the index
222
- handleDropdownLeave(index)
223
- });
258
+ if (title === "Pricing") {
259
+ window.location.href = "/pricing/";
224
260
  }
225
- function handleBackClick() {
226
- setIsDeveloper(false);
227
- setIsCompany(false);
228
- setIsProduct(false);
229
- setCurrentTab('');
230
- props.HEADER_LIST.forEach((item, index) => {
231
- // Access the values of each item and the index
232
- handleDropdownLeave(index)
233
- });
234
-
261
+ if (title === "Product") {
262
+ setIsProduct(true);
235
263
  }
236
-
237
-
238
- function handleMbDropdownClick(title) {
239
- const i = props.HEADER_LIST.findIndex(item => item.title === title);
240
- handleDropdownEnter(i);
241
- // Implement your logic to open the additional options for the clicked dropdown
242
- if (title === 'Developer') {
243
-
244
- setIsDeveloper(true);
245
- }
246
- if (title === 'Customers') {
247
-
248
- window.location.href = '/case-studies/'
249
- }
250
- if (title === 'Pricing') {
251
-
252
- window.location.href ='/pricing/'
253
- }
254
- if (title === 'Product') {
255
- setIsProduct(true);
256
- }
257
- if (title === 'Company') {
258
- setIsCompany(true);
259
- }
264
+ if (title === "Company") {
265
+ setIsCompany(true);
260
266
  }
267
+ }
268
+
269
+ useEffect(() => {
270
+ if (isProduct) {
271
+ setCurrentTab("Product");
272
+ } else if (isDeveloper) {
273
+ setCurrentTab("Developer");
274
+ } else if (isCompany) {
275
+ setCurrentTab("Company");
276
+ }
277
+ }, [isProduct, isDeveloper, isCompany]);
261
278
 
262
- useEffect(() => {
263
- if (isProduct) {
264
- setCurrentTab('Product');
265
- } else if (isDeveloper) {
266
- setCurrentTab('Developer');
267
- } else if (isCompany) {
268
- setCurrentTab('Company');
269
- }
270
- }, [isProduct, isDeveloper, isCompany]);
271
-
272
-
273
- return (
274
- <div className="relative mx-auto">
275
- <div className={`flex items-center ${HDSColor(props.headerBg)} justify-between py-4 db:py-3 tb-l:justify-start`}>
276
- <div className='flex flex-row justify-between items-center w-full tb-l:w-fit'>
277
- <div>
278
-
279
- <a href={props.headerUrl} className={"flex items-center"}>
280
- <Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
281
- </a>
282
- </div>
283
- <div className='hds-hidden-tbl flex z-[10] items-center gap-6'>
284
- <div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
285
- {
286
- !props.hideSearch &&
287
- (<AlgoliaSearch {...props} />)
288
- }
289
- </div>
290
- {!(isCompany || isDeveloper || isProduct) &&
291
- (
292
- <motion.div
293
- initial={{ opacity: 0 }}
294
- animate={{ opacity: 1 }}
295
- transition={{ duration: 0.3, opacity: { ease: "easeIn" } }}
296
- className='h-5 w-5 mt-3' onClick={() => handleMbDropdownClose()}>
297
- <div className=' h-5 cursor-pointer' >
298
- <div aria-hidden="true" className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
299
- <div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
300
- </div>
301
-
302
- </motion.div>)}
303
- </div>
304
- </div>
305
- <div className='hds-hidden tb-l:flex flex-row w-full justify-between items-center'>
279
+ // **************************** //
306
280
 
307
- <nav className="hds-hidden items-baseline relative tb-l:pl-8 tb-l:flex tb-l:space-x-6"
308
- onMouseEnter={() => setIsArrowActive(true)}
309
- onMouseLeave={() => setIsArrowActive(false)}
281
+ const handleLogoRightClick = (e) => {
282
+ e.preventDefault();
310
283
 
311
- >
312
- {headerListfunction(props.HEADER_LIST)}
284
+ if (e && e.type === "contextmenu") {
285
+ if (isBrowser) {
286
+ // scrollToTop();
313
287
 
314
- </nav>
288
+ window.open(
289
+ "https://drive.google.com/drive/folders/1xZHt4JPYRvNOo44VHtAJRj3bMD3-26ON",
290
+ "_blank"
291
+ );
292
+ }
315
293
 
316
- <div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
317
- {
318
- !props.hideSearch &&
319
- (<AlgoliaSearch {...props} />)
320
- }
321
- <a href='/contact-us?type=hasuraenterprise' className='hds-hidden db:flex'>
322
- <Typography textStyle='body3c-medium' className='text-neutral-800 hover:text-blue-600'>
323
- Contact Sales
324
- </Typography>
325
- </a>
326
- {!hideLoginButton && <a href={loginURL} >
327
- <HDSButton
328
- label="Log In"
329
- type='tonal'
330
- leftIconVariant='none'
331
- rightIconVariant='none'
332
- state='default'
333
- size='sm'
334
- rightAnimatedArrow='true'
335
- rightAnimatedArrowColor='#3970FD'
336
- animatedHoverStroke='group-hover:stroke-neutral-0'
337
- className='hds-hidden tb-l:flex'
338
- />
339
- </a>}
340
- <a href={signupURL}>
341
-
342
- <HDSButton
343
- label="Get Started"
344
- type='primary'
345
- leftIconVariant='none'
346
- rightIconVariant='none'
347
- state='default'
348
- size='sm'
349
- rightAnimatedArrow='true'
350
- rightAnimatedArrowColor='#ffffff'
351
- animatedHoverStroke='group-hover:stroke-neutral-0'
352
- className='hds-hidden tb:flex'
353
- />
354
- </a>
355
- </div>
294
+ return null;
295
+ }
356
296
 
297
+ return null;
298
+ };
299
+
300
+ // **************************** //
301
+
302
+ return (
303
+ <div className="relative mx-auto">
304
+ <div
305
+ className={`flex items-center ${HDSColor(
306
+ props.headerBg
307
+ )} justify-between py-4 db:py-3 tb-l:justify-start`}
308
+ >
309
+ <div className="flex flex-row justify-between items-center w-full tb-l:w-fit">
310
+ <div onContextMenu={(e) => handleLogoRightClick(e)}>
311
+ <a href={props.headerUrl} className={"flex items-center"}>
312
+ <Icon
313
+ height="w-[103px] h-[33px]"
314
+ variant={"hasuraPrimary"}
315
+ strokeColor={""}
316
+ />
317
+ </a>
318
+ </div>
319
+ <div className="hds-hidden-tbl flex z-[10] items-center gap-6">
320
+ <div className={"h-full " + (mobileNavOpen ? " hds-hidden" : "")}>
321
+ {!props.hideSearch && <AlgoliaSearch {...props} />}
322
+ </div>
323
+ {!(isCompany || isDeveloper || isProduct) && (
324
+ <motion.div
325
+ initial={{ opacity: 0 }}
326
+ animate={{ opacity: 1 }}
327
+ transition={{ duration: 0.3, opacity: { ease: "easeIn" } }}
328
+ className="h-5 w-5 mt-3"
329
+ onClick={() => handleMbDropdownClose()}
330
+ >
331
+ <div className=" h-5 cursor-pointer">
332
+ <div
333
+ aria-hidden="true"
334
+ className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}
335
+ ></div>
336
+ <div
337
+ aria-hidden="true"
338
+ className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}
339
+ ></div>
357
340
  </div>
358
- {/* mobile */}
359
- <div className="hds-hidden-tbl overflow-auto flex ">
360
- {/* <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
341
+ </motion.div>
342
+ )}
343
+ </div>
344
+ </div>
345
+ <div className="hds-hidden tb-l:flex flex-row w-full justify-between items-center">
346
+ <nav
347
+ className="hds-hidden items-baseline relative tb-l:pl-8 tb-l:flex tb-l:space-x-6"
348
+ onMouseEnter={() => setIsArrowActive(true)}
349
+ onMouseLeave={() => setIsArrowActive(false)}
350
+ >
351
+ {headerListfunction(props.HEADER_LIST)}
352
+ </nav>
353
+
354
+ <div className="hds-hidden tb-l:flex flex-row items-center gap-x-4 ">
355
+ {!props.hideSearch && <AlgoliaSearch {...props} />}
356
+ <a
357
+ href="/contact-us?type=hasuraenterprise"
358
+ className="hds-hidden db:flex"
359
+ >
360
+ <Typography
361
+ textStyle="body3c-medium"
362
+ className="text-neutral-800 hover:text-blue-600"
363
+ >
364
+ Contact Sales
365
+ </Typography>
366
+ </a>
367
+ {!hideLoginButton && (
368
+ <a href={loginURL}>
369
+ <HDSButton
370
+ label="Log In"
371
+ type="tonal"
372
+ leftIconVariant="none"
373
+ rightIconVariant="none"
374
+ state="default"
375
+ size="sm"
376
+ rightAnimatedArrow="true"
377
+ rightAnimatedArrowColor="#3970FD"
378
+ animatedHoverStroke="group-hover:stroke-neutral-0"
379
+ className="hds-hidden tb-l:flex"
380
+ />
381
+ </a>
382
+ )}
383
+ <a href={signupURL}>
384
+ <HDSButton
385
+ label="Get Started"
386
+ type="primary"
387
+ leftIconVariant="none"
388
+ rightIconVariant="none"
389
+ state="default"
390
+ size="sm"
391
+ rightAnimatedArrow="true"
392
+ rightAnimatedArrowColor="#ffffff"
393
+ animatedHoverStroke="group-hover:stroke-neutral-0"
394
+ className="hds-hidden tb:flex"
395
+ />
396
+ </a>
397
+ </div>
398
+ </div>
399
+ {/* mobile */}
400
+ <div className="hds-hidden-tbl overflow-auto flex ">
401
+ {/* <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
361
402
  <span className="sr-only">Open menu</span> */}
362
403
 
363
-
364
- <div className={"bg-neutral-100 shadow-sh1 hds-hidden-tbl block fixed w-full tb:max-w-[480px] tb:left-auto tb:right-0 mx-auto left-4 top-0 transform transition duration-500 ease-in-out h-[calc(100%-1px)] max-h-screen overflow-y-auto" + ((mobileNavOpen) ? " translate-x-0" : " translate-x-[1240px]")}>
365
-
366
- <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
367
-
368
- <div className='pt-6 pb-4 tb:mr-[12px] mr-[30px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
369
- {(isCompany || isDeveloper || isProduct) &&
370
- (
371
- <div
372
- className=' flex flex-row justify-start z-10'
373
- onClick={() => handleBackClick()}
374
-
375
- >
376
- <Icon height='w-5 h-5 ml-4 cursor-pointer' variant={'arrowleft'} strokeClass='stroke-neutral-1000' />
377
- </div>
378
- )}
379
- <motion.div
380
- initial={{ opacity: 0 }}
381
- animate={{ opacity: 1 }}
382
- transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
383
- className='w-full justify-center flex '>
384
- <Typography textStyle='body3c-medium' className='text-neutral-900'>{currentTab}</Typography>
385
- </motion.div>
386
- {(isCompany || isDeveloper || isProduct) &&
387
- (
388
- <motion.div
389
- initial={{ opacity: 0 }}
390
- animate={{ opacity: 1 }}
391
- transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
392
- className=' flex flex-row justify-start z-10'
393
- onClick={() => handleMbDropdownClose()}
394
-
395
- >
396
- <Icon height='w-5 h-5 ml-4 stroke-2 cursor-pointer' variant={'xclose'} strokeClass='stroke-neutral-1000' />
397
- </motion.div>)}
398
-
399
- </div>
400
- <AnimatePresence mode='wait' exit={false} >
401
- {(isProduct || isDeveloper || isCompany) ? (
402
- <motion.div
403
- key='hey'
404
- exit={{ opacity: 0, y: [0, 300] }}
405
- animate={{ opacity: 1, y: [300, 0] }}
406
- transition={{ duration: 0.2, exit: { duration: 0.3 }, opacity: { ease: "easeIn" } }}
407
- when={isProduct || isDeveloper || isCompany}
408
-
409
- className="flex flex-col justify-between "
410
- >
411
- <div className="flex flex-col justify-between rounded-2xl h-full">
412
- <div className="pl-4 pr-8 tb:pr-4">
413
- {mobileNav(props.HEADER_LIST)}
414
- </div>
415
- </div>
416
- </motion.div>
417
- ) : (
418
- <motion.div
419
- initial={{ opacity: 1 }}
420
- animate={{ opacity: 1 }}
421
- transition={{ duration: 0.1, opacity: { ease: "easeIn" } }}
422
- className="mt-7 flex flex-col gap-6 ml-4"
423
- >
424
- <div className="flex flex-col mr-[50px] mb-m:items-center items-end">
425
- <img
426
- className="inline-block max-w-[242px] w-full"
427
- src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1688572403/hasura-design-system/mutations_1_tdh5ir.png "
428
- alt=""
429
- />
430
- </div>
431
- <nav className="grid divide-y mr-8 tb:mr-4 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl mb-6">
432
- {props.HEADER_LIST.map((item) => (
433
- <div
434
- key={item['title']}
435
- onClick={() => handleMbDropdownClick(item['title'])}
436
- className="flex justify-between items-center p-4 cursor-pointer group"
437
- >
438
- <div className="flex items-center justify-center gap-2">
439
- {/* <Icon height="h-5 w-5" variant="home03" strokeColor="#3970FD" /> */}
440
- <Typography textStyle="body3c-medium" className="text-neutral-700 hover:text-neutral-1000 transition-all duration-300 ease-in-out">
441
- {`${item['title']}`}
442
- </Typography>
443
- </div>
444
- <Icon height="h-5 w-5 stroke-[1.5px] group-hover:translate-x-1 ease-in-out transition duration-300" variant="chevronright" strokeClass="stroke-neutral-500" />
445
- </div>
446
- ))}
447
- </nav>
448
- </motion.div>
449
- )}
450
- </AnimatePresence>
451
-
452
- </div>
453
- <div className="py-6 shadow-sh1 bg-neutral-0 pl-4 pr-8 self-end w-full">
454
-
455
- <div className='flex flex-row justify-around'>
456
- <div className='w-full flex gap-2'>
457
- {!hideLoginButton && <a href={loginURL} className='w-1/2'>
458
- <HDSButton
459
- label="Log In"
460
- type='tonal'
461
- leftIconVariant='none'
462
- rightIconVariant='none'
463
- state='default'
464
- size='sm'
465
- rightAnimatedArrow='true'
466
- rightAnimatedArrowColor='#3970FD'
467
- animatedHoverStroke='group-hover:stroke-neutral-0'
468
- className=' !w-full'
469
- />
470
- </a>}
471
- <a href={signupURL} className={!hideLoginButton ? 'w-1/2' : 'w-full'}>
472
- <HDSButton
473
- label="Get Started"
474
- type='primary'
475
- leftIconVariant='none'
476
- rightIconVariant='none'
477
- state='default'
478
- size='sm'
479
- rightAnimatedArrow='true'
480
- rightAnimatedArrowColor='#ffffff'
481
- animatedHoverStroke='group-hover:stroke-neutral-0'
482
- className=' !w-full'
483
- />
484
- </a>
485
- </div>
486
- </div>
487
-
488
- </div>
404
+ <div
405
+ className={
406
+ "bg-neutral-100 shadow-sh1 hds-hidden-tbl block fixed w-full tb:max-w-[480px] tb:left-auto tb:right-0 mx-auto left-4 top-0 transform transition duration-500 ease-in-out h-[calc(100%-1px)] max-h-screen overflow-y-auto" +
407
+ (mobileNavOpen ? " translate-x-0" : " translate-x-[1240px]")
408
+ }
409
+ >
410
+ <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
411
+ <div className="pt-6 pb-4 tb:mr-[12px] mr-[30px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 ">
412
+ {(isCompany || isDeveloper || isProduct) && (
413
+ <div
414
+ className=" flex flex-row justify-start z-10"
415
+ onClick={() => handleBackClick()}
416
+ >
417
+ <Icon
418
+ height="w-5 h-5 ml-4 cursor-pointer"
419
+ variant={"arrowleft"}
420
+ strokeClass="stroke-neutral-1000"
421
+ />
422
+ </div>
423
+ )}
424
+ <motion.div
425
+ initial={{ opacity: 0 }}
426
+ animate={{ opacity: 1 }}
427
+ transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
428
+ className="w-full justify-center flex "
429
+ >
430
+ <Typography
431
+ textStyle="body3c-medium"
432
+ className="text-neutral-900"
433
+ >
434
+ {currentTab}
435
+ </Typography>
436
+ </motion.div>
437
+ {(isCompany || isDeveloper || isProduct) && (
438
+ <motion.div
439
+ initial={{ opacity: 0 }}
440
+ animate={{ opacity: 1 }}
441
+ transition={{ duration: 0.4, opacity: { ease: "easeIn" } }}
442
+ className=" flex flex-row justify-start z-10"
443
+ onClick={() => handleMbDropdownClose()}
444
+ >
445
+ <Icon
446
+ height="w-5 h-5 ml-4 stroke-2 cursor-pointer"
447
+ variant={"xclose"}
448
+ strokeClass="stroke-neutral-1000"
449
+ />
450
+ </motion.div>
451
+ )}
452
+ </div>
453
+ <AnimatePresence mode="wait" exit={false}>
454
+ {isProduct || isDeveloper || isCompany ? (
455
+ <motion.div
456
+ key="hey"
457
+ exit={{ opacity: 0, y: [0, 300] }}
458
+ animate={{ opacity: 1, y: [300, 0] }}
459
+ transition={{
460
+ duration: 0.2,
461
+ exit: { duration: 0.3 },
462
+ opacity: { ease: "easeIn" },
463
+ }}
464
+ when={isProduct || isDeveloper || isCompany}
465
+ className="flex flex-col justify-between "
466
+ >
467
+ <div className="flex flex-col justify-between rounded-2xl h-full">
468
+ <div className="pl-4 pr-8 tb:pr-4">
469
+ {mobileNav(props.HEADER_LIST)}
470
+ </div>
489
471
  </div>
490
-
472
+ </motion.div>
473
+ ) : (
474
+ <motion.div
475
+ initial={{ opacity: 1 }}
476
+ animate={{ opacity: 1 }}
477
+ transition={{ duration: 0.1, opacity: { ease: "easeIn" } }}
478
+ className="mt-7 flex flex-col gap-6 ml-4"
479
+ >
480
+ <div className="flex flex-col mr-[50px] mb-m:items-center items-end">
481
+ <img
482
+ className="inline-block max-w-[242px] w-full"
483
+ src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1705670474/website%20v3/customers/mutations_1_tdh5ir_yf6n7k.png"
484
+ alt="hasura-header-illustration"
485
+ loading="lazy"
486
+ />
487
+ </div>
488
+ <nav className="grid divide-y mr-8 tb:mr-4 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl mb-6">
489
+ {props.HEADER_LIST.map((item) => (
490
+ <div
491
+ key={item["title"]}
492
+ onClick={() => handleMbDropdownClick(item["title"])}
493
+ className="flex justify-between items-center p-4 cursor-pointer group"
494
+ >
495
+ <div className="flex items-center justify-center gap-2">
496
+ {/* <Icon height="h-5 w-5" variant="home03" strokeColor="#3970FD" /> */}
497
+ <Typography
498
+ textStyle="body3c-medium"
499
+ className="text-neutral-700 hover:text-neutral-1000 transition-all duration-300 ease-in-out"
500
+ >
501
+ {`${item["title"]}`}
502
+ </Typography>
503
+ </div>
504
+ <Icon
505
+ height="h-5 w-5 stroke-[1.5px] group-hover:translate-x-1 ease-in-out transition duration-300"
506
+ variant="chevronright"
507
+ strokeClass="stroke-neutral-500"
508
+ />
509
+ </div>
510
+ ))}
511
+ </nav>
512
+ </motion.div>
513
+ )}
514
+ </AnimatePresence>
515
+ </div>
516
+ <div className="py-6 shadow-sh1 bg-neutral-0 pl-4 pr-8 self-end w-full">
517
+ <div className="flex flex-row justify-around">
518
+ <div className="w-full flex gap-2">
519
+ {!hideLoginButton && (
520
+ <a href={loginURL} className="w-1/2">
521
+ <HDSButton
522
+ label="Log In"
523
+ type="tonal"
524
+ leftIconVariant="none"
525
+ rightIconVariant="none"
526
+ state="default"
527
+ size="sm"
528
+ rightAnimatedArrow="true"
529
+ rightAnimatedArrowColor="#3970FD"
530
+ animatedHoverStroke="group-hover:stroke-neutral-0"
531
+ className=" !w-full"
532
+ />
533
+ </a>
534
+ )}
535
+ <a
536
+ href={signupURL}
537
+ className={!hideLoginButton ? "w-1/2" : "w-full"}
538
+ >
539
+ <HDSButton
540
+ label="Get Started"
541
+ type="primary"
542
+ leftIconVariant="none"
543
+ rightIconVariant="none"
544
+ state="default"
545
+ size="sm"
546
+ rightAnimatedArrow="true"
547
+ rightAnimatedArrowColor="#ffffff"
548
+ animatedHoverStroke="group-hover:stroke-neutral-0"
549
+ className=" !w-full"
550
+ />
551
+ </a>
491
552
  </div>
553
+ </div>
492
554
  </div>
555
+ </div>
493
556
  </div>
494
- )
557
+ </div>
558
+ </div>
559
+ );
495
560
  }
496
561
 
497
562
  V3Header.defaultProps = {
498
- hideLoginButton:false,
499
- hideSearch:false,
500
- HEADER_LIST: [
563
+ hideLoginButton: false,
564
+ hideSearch: false,
565
+ HEADER_LIST: [
566
+ {
567
+ title: "Product",
568
+ primaryCard: {
569
+ iconVariant: "layersthree01",
570
+ mainDescription: `Discover Hasura's core capabilities for automating the building, securing, optimizing, and deploying of APIs.`,
571
+ primaryBtnLabel: "Hasura Data API Platform",
572
+ primaryBtnCTA: "/products",
573
+ strokeClass: "stroke-neutral-800",
574
+ tertiaryBtn: [
575
+ {
576
+ cta_leftVariantIcon: "checksquarebroken",
577
+ cta_leftVariantIconColor: "#6C737F",
578
+ cta_text: "Compare Plans",
579
+ cta_link: "/pricing",
580
+ },
581
+ ],
582
+ secondaryBtn: [
583
+ {
584
+ cta_leftVariantIcon: "zap",
585
+ cta_leftVariantIconColor: "#6C737F",
586
+ cta_text: "Deployment Options",
587
+ cta_link: "/products/deployment",
588
+ },
589
+ ],
590
+ },
591
+ secondaryCardArr: [
501
592
  {
502
- title: 'Product',
503
- primaryCard: {
504
- iconVariant: 'layersthree01',
505
- mainDescription: `Discover Hasura's core capabilities for automating the building, securing, optimizing, and deploying of APIs.`,
506
- primaryBtnLabel: 'Hasura Data API Platform',
507
- primaryBtnCTA:'/products',
508
- strokeClass: 'stroke-neutral-800',
509
- tertiaryBtn: [
510
- { cta_leftVariantIcon: 'checksquarebroken', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare Plans', cta_link:'/pricing' }
511
- ],
512
- secondaryBtn: [
513
- { cta_leftVariantIcon: 'zap', cta_leftVariantIconColor: '#6C737F', cta_text: 'Deployment Options', cta_link: '/products/deployment' }
514
- ],
593
+ childArray: [
594
+ {
595
+ description: "",
596
+ href: "/products/instant-api",
597
+ icon: "lightning01",
598
+ name: "Instant API",
599
+ strokeClass: "stroke-neutral-500",
515
600
  },
516
- secondaryCardArr:
517
- [
518
- {
519
- childArray: [
520
- {
521
- description: '',
522
- href: '/products/instant-api',
523
- icon: "lightning01",
524
- name: 'Instant API',
525
- strokeClass: 'stroke-neutral-500'
526
- },
527
- {
528
- description: '',
529
- href: '/products/authorization',
530
- icon: 'eye',
531
- name: 'Authorization',
532
- strokeClass: 'stroke-neutral-500'
533
- },
534
- {
535
- description: '',
536
- href: '/products/performance',
537
- icon: 'speedometer03',
538
- name: 'Performance',
539
- strokeClass: 'stroke-neutral-500'
540
- },
541
- {
542
- description: '',
543
- href: '/products/federation',
544
- icon: 'data',
545
- name: 'Federation',
546
- strokeClass: 'stroke-neutral-500'
547
- },
548
- {
549
- description: '',
550
- href: '/products/api-security',
551
- icon: 'shieldtick',
552
- name: 'API Security',
553
- strokeClass: 'stroke-neutral-500'
554
- },
555
- {
556
- description: '',
557
- href: '/products/observability',
558
- icon: "piechart01",
559
- name: 'Observability',
560
- strokeClass: 'stroke-neutral-500'
561
- }
562
- ],
563
- label: 'CAPABILITIES'
564
- },
565
- {
566
- childArray: [
567
- {
568
- description: '',
569
- href: '/graphql/database',
570
- icon: 'database01',
571
- name: 'All Databases',
572
- strokeClass: 'stroke-neutral-500'
573
- },
574
- {
575
- description: '',
576
- href: '/graphql/database?category=planned',
577
- icon: 'checksquare',
578
- name: 'Planned Databases',
579
- strokeClass: 'stroke-neutral-500'
580
- },
581
- ],
582
- label: 'Data sources'
583
- }
584
- ],
585
- flyoutD:{
586
- link:'https://hasura.io/ai',
587
- IconVariant:'aibot',
588
- btnLabel:'AI with Hasura',
589
- description:'Use Hasura Notebook to get Gen AI querying over your structured private data sources via GraphQL and REST APIs'
590
- }
601
+ {
602
+ description: "",
603
+ href: "/products/authorization",
604
+ icon: "eye",
605
+ name: "Authorization",
606
+ strokeClass: "stroke-neutral-500",
607
+ },
608
+ {
609
+ description: "",
610
+ href: "/products/performance",
611
+ icon: "speedometer03",
612
+ name: "Performance",
613
+ strokeClass: "stroke-neutral-500",
614
+ },
615
+ {
616
+ description: "",
617
+ href: "/products/federation",
618
+ icon: "data",
619
+ name: "Federation",
620
+ strokeClass: "stroke-neutral-500",
621
+ },
622
+ {
623
+ description: "",
624
+ href: "/products/api-security",
625
+ icon: "shieldtick",
626
+ name: "API Security",
627
+ strokeClass: "stroke-neutral-500",
628
+ },
629
+ {
630
+ description: "",
631
+ href: "/products/observability",
632
+ icon: "piechart01",
633
+ name: "Observability",
634
+ strokeClass: "stroke-neutral-500",
635
+ },
636
+ ],
637
+ label: "CAPABILITIES",
591
638
  },
592
639
  {
593
-
594
- title: 'Developer',
595
- secondaryCardArr: [
596
- {
597
- childArray: [
598
- {
599
- description: '',
600
- href: '/docs/latest/index/',
601
- icon: "file02",
602
- name: 'Documentation',
603
- strokeClass: 'stroke-neutral-500'
604
- },
605
- {
606
- description: '',
607
- href: '/hub',
608
- icon: 'hasura',
609
- name: 'Hasura Hub',
610
- strokeClass: 'stroke-neutral-500'
611
- },
612
- {
613
- description: '',
614
- href: '/reference-app/',
615
- icon: 'route',
616
- name: 'Guides',
617
- strokeClass: 'stroke-neutral-500'
618
- },
619
- {
620
- description: '',
621
- href: '/graphql/',
622
- icon: 'asterisk02',
623
- name: 'GraphQL Hub',
624
- strokeClass: 'stroke-neutral-500'
625
- },
626
- {
627
- description: '',
628
- href: 'https://cloud.hasura.io/public/graphiql',
629
- icon: "codebrowser",
630
- name: 'GraphiQL',
631
- strokeClass: 'stroke-neutral-500'
632
- },
633
- {
634
- description: '',
635
- href: '/changelog',
636
- icon: 'gitpullrequest',
637
- name: 'Changelog',
638
- strokeClass: 'stroke-neutral-500'
639
- }
640
- ],
641
- label: 'BUILD'
642
- },
643
- {
644
-
645
- childArray: [
646
- {
647
- description: '',
648
- href: '/blog',
649
- icon: 'bookopen01',
650
- name: 'Blog',
651
- strokeClass: 'stroke-neutral-500'
652
- },
653
- {
654
- description: '',
655
- href: '/learn/',
656
- icon: 'graduationhat02',
657
- name: 'Tutorials',
658
- strokeClass: 'stroke-neutral-500'
659
- },
660
- {
661
- description: '',
662
- href: '/events',
663
- icon: 'calendarplus02',
664
- name: 'Events',
665
- strokeClass: 'stroke-neutral-500'
666
- },
667
- {
668
- description: '',
669
- href: '/sample-apps/',
670
- icon: 'box',
671
- name: 'Resources',
672
- strokeClass: 'stroke-neutral-500'
673
- },
674
- ],
675
- label: 'Learn',
676
-
677
- },
678
- {
679
-
680
- childArray: [
681
- {
682
- description: '',
683
- href: '/community/',
684
- icon: 'users01',
685
- name: 'Community',
686
- strokeClass: 'stroke-neutral-500'
687
- },
688
- {
689
- description: '',
690
- href: 'https://discord.com/invite/hasura',
691
- icon: 'discord',
692
- name: 'Discord',
693
- strokeClass: ''
694
- },
695
- {
696
- description: '',
697
- href: 'https://github.com/hasura/graphql-engine/discussions',
698
- icon: 'octoface',
699
- name: 'Discussions',
700
- strokeClass: ''
701
- },
702
- {
703
- description: '',
704
- href: 'https://www.meetup.com/pro/hasura/',
705
- icon: 'meetup',
706
- name: 'Meetups',
707
- strokeClass: ''
708
- },
709
- {
710
- description: '',
711
- href: '/support/',
712
- icon: 'hand',
713
- name: 'Support',
714
- strokeClass: 'stroke-neutral-500'
715
- },
716
- ],
717
- label: 'Connect',
718
-
719
- },
720
- ],
721
-
722
- tertiaryCard: [
723
- {
724
- title: 'HasuraCon 2023 is here!',
725
-
726
- title_colorClass: 'text-neutral-900',
727
- img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
728
- },
729
- {
730
- title: 'Top 6 Architecture Trends for API Development',
731
-
732
- title_colorClass: 'text-neutral-900',
733
- img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
734
- },
735
- {
736
- title: 'Announcing Hasura integration with Snowflake',
737
-
738
- title_colorClass: 'text-neutral-900',
739
- img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
740
- },
741
- ]
640
+ childArray: [
641
+ {
642
+ description: "",
643
+ href: "/graphql/database",
644
+ icon: "database01",
645
+ name: "All Databases",
646
+ strokeClass: "stroke-neutral-500",
647
+ },
648
+ {
649
+ description: "",
650
+ href: "/graphql/database?category=planned",
651
+ icon: "checksquare",
652
+ name: "Planned Databases",
653
+ strokeClass: "stroke-neutral-500",
654
+ },
655
+ ],
656
+ label: "Data sources",
742
657
  },
658
+ ],
659
+ flyoutD: {
660
+ link: "https://hasura.io/ai",
661
+ IconVariant: "aibot",
662
+ btnLabel: "AI with Hasura",
663
+ description:
664
+ "Use Hasura Notebook to get Gen AI querying over your structured private data sources via GraphQL and REST APIs",
665
+ },
666
+ },
667
+ {
668
+ title: "Developer",
669
+ secondaryCardArr: [
743
670
  {
671
+ childArray: [
672
+ {
673
+ description: "",
674
+ href: "/docs/latest/index/",
675
+ icon: "file02",
676
+ name: "Documentation",
677
+ strokeClass: "stroke-neutral-500",
678
+ },
679
+ {
680
+ description: "",
681
+ href: "/hub",
682
+ icon: "hasura",
683
+ name: "Hasura Hub",
684
+ strokeClass: "stroke-neutral-500",
685
+ },
686
+ {
687
+ description: "",
688
+ href: "/reference-app/",
689
+ icon: "route",
690
+ name: "Guides",
691
+ strokeClass: "stroke-neutral-500",
692
+ },
693
+ {
694
+ description: "",
695
+ href: "/graphql/",
696
+ icon: "asterisk02",
697
+ name: "GraphQL Hub",
698
+ strokeClass: "stroke-neutral-500",
699
+ },
700
+ {
701
+ description: "",
702
+ href: "https://cloud.hasura.io/public/graphiql",
703
+ icon: "codebrowser",
704
+ name: "GraphiQL",
705
+ strokeClass: "stroke-neutral-500",
706
+ },
707
+ {
708
+ description: "",
709
+ href: "/changelog",
710
+ icon: "gitpullrequest",
711
+ name: "Changelog",
712
+ strokeClass: "stroke-neutral-500",
713
+ },
714
+ ],
715
+ label: "BUILD",
716
+ },
717
+ {
718
+ childArray: [
719
+ {
720
+ description: "",
721
+ href: "/blog",
722
+ icon: "bookopen01",
723
+ name: "Blog",
724
+ strokeClass: "stroke-neutral-500",
725
+ },
726
+ {
727
+ description: "",
728
+ href: "/learn/",
729
+ icon: "graduationhat02",
730
+ name: "Tutorials",
731
+ strokeClass: "stroke-neutral-500",
732
+ },
733
+ {
734
+ description: "",
735
+ href: "/events",
736
+ icon: "calendarplus02",
737
+ name: "Events",
738
+ strokeClass: "stroke-neutral-500",
739
+ },
740
+ {
741
+ description: "",
742
+ href: "/sample-apps/",
743
+ icon: "box",
744
+ name: "Resources",
745
+ strokeClass: "stroke-neutral-500",
746
+ },
747
+ ],
748
+ label: "Learn",
749
+ },
750
+ {
751
+ childArray: [
752
+ {
753
+ description: "",
754
+ href: "/community/",
755
+ icon: "users01",
756
+ name: "Community",
757
+ strokeClass: "stroke-neutral-500",
758
+ },
759
+ {
760
+ description: "",
761
+ href: "https://discord.com/invite/hasura",
762
+ icon: "discord",
763
+ name: "Discord",
764
+ strokeClass: "",
765
+ },
766
+ {
767
+ description: "",
768
+ href: "https://github.com/hasura/graphql-engine/discussions",
769
+ icon: "octoface",
770
+ name: "Discussions",
771
+ strokeClass: "",
772
+ },
773
+ {
774
+ description: "",
775
+ href: "https://www.meetup.com/pro/hasura/",
776
+ icon: "meetup",
777
+ name: "Meetups",
778
+ strokeClass: "",
779
+ },
780
+ {
781
+ description: "",
782
+ href: "/support/",
783
+ icon: "hand",
784
+ name: "Support",
785
+ strokeClass: "stroke-neutral-500",
786
+ },
787
+ ],
788
+ label: "Connect",
789
+ },
790
+ ],
744
791
 
745
- title: 'Customers',
746
- href: ''
792
+ tertiaryCard: [
793
+ {
794
+ title: "HasuraCon 2023 is here!",
747
795
 
796
+ title_colorClass: "text-neutral-900",
797
+ img_url:
798
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png",
748
799
  },
800
+ {
801
+ title: "Top 6 Architecture Trends for API Development",
749
802
 
803
+ title_colorClass: "text-neutral-900",
804
+ img_url:
805
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png",
806
+ },
750
807
  {
808
+ title: "Announcing Hasura integration with Snowflake",
751
809
 
752
- title: 'Company',
753
- secondaryCardArr: [
754
- {
755
- childArray: [
756
- {
757
- description: '',
758
- href: '/about/',
759
- icon: "pentool02",
760
- name: 'Our Story',
761
- strokeClass: 'stroke-neutral-500'
762
- },
763
- {
764
- description: '',
765
- href: '/partners',
766
- icon: 'intersectcircle',
767
- name: 'Partners',
768
- strokeClass: 'stroke-neutral-500'
769
- },
770
- {
771
- description: '',
772
- href: '/careers/',
773
- icon: 'hearthand',
774
- name: 'Work at Hasura',
775
- strokeClass: 'stroke-neutral-500'
776
- },
777
- // {
778
- // description: '',
779
- // href: '/press/',
780
- // icon: 'headingsquare',
781
- // name: 'Newsroom',
782
- // strokeClass: 'stroke-neutral-500'
783
- // },
784
- // {
785
- // description: '',
786
- // href: '/brand',
787
- // icon: 'star06',
788
- // name: 'Brand',
789
- // strokeClass: 'stroke-neutral-500'
790
- // },
791
-
792
- ],
793
- label: 'Company'
794
- },
795
-
796
- ],
797
-
798
- tertiaryCard: [
799
- {
800
- title: 'HasuraCon 2023 is here!',
801
-
802
- title_colorClass: 'text-neutral-900',
803
- img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png'
804
- },
805
- {
806
- title: 'Top 6 Architecture Trends for API Development',
807
-
808
- title_colorClass: 'text-neutral-900',
809
- img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png'
810
- },
811
- {
812
- title: 'Announcing Hasura integration with Snowflake',
813
-
814
- title_colorClass: 'text-neutral-900',
815
- img_url: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png'
816
- },
817
- ]
810
+ title_colorClass: "text-neutral-900",
811
+ img_url:
812
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png",
818
813
  },
814
+ ],
815
+ },
816
+ {
817
+ title: "Customers",
818
+ href: "",
819
+ },
820
+
821
+ {
822
+ title: "Company",
823
+ secondaryCardArr: [
819
824
  {
825
+ childArray: [
826
+ {
827
+ description: "",
828
+ href: "/about/",
829
+ icon: "pentool02",
830
+ name: "Our Story",
831
+ strokeClass: "stroke-neutral-500",
832
+ },
833
+ {
834
+ description: "",
835
+ href: "/partners",
836
+ icon: "intersectcircle",
837
+ name: "Partners",
838
+ strokeClass: "stroke-neutral-500",
839
+ },
840
+ {
841
+ description: "",
842
+ href: "/careers/",
843
+ icon: "hearthand",
844
+ name: "Work at Hasura",
845
+ strokeClass: "stroke-neutral-500",
846
+ },
847
+ // {
848
+ // description: '',
849
+ // href: '/press/',
850
+ // icon: 'headingsquare',
851
+ // name: 'Newsroom',
852
+ // strokeClass: 'stroke-neutral-500'
853
+ // },
854
+ // {
855
+ // description: '',
856
+ // href: '/brand',
857
+ // icon: 'star06',
858
+ // name: 'Brand',
859
+ // strokeClass: 'stroke-neutral-500'
860
+ // },
861
+ ],
862
+ label: "Company",
863
+ },
864
+ ],
820
865
 
821
- title: 'Pricing',
822
- href: ''
866
+ tertiaryCard: [
867
+ {
868
+ title: "HasuraCon 2023 is here!",
823
869
 
870
+ title_colorClass: "text-neutral-900",
871
+ img_url:
872
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png",
824
873
  },
874
+ {
875
+ title: "Top 6 Architecture Trends for API Development",
825
876
 
877
+ title_colorClass: "text-neutral-900",
878
+ img_url:
879
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png",
880
+ },
881
+ {
882
+ title: "Announcing Hasura integration with Snowflake",
826
883
 
827
- ],
828
- headerUrl: '/'
829
- }
884
+ title_colorClass: "text-neutral-900",
885
+ img_url:
886
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png",
887
+ },
888
+ ],
889
+ },
890
+ {
891
+ title: "Pricing",
892
+ href: "",
893
+ },
894
+ ],
895
+ headerUrl: "/",
896
+ };