@luxfi/core 5.2.12 → 5.2.13
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/commerce/ui/conf.ts +13 -13
- package/commerce/ui/context.tsx +126 -126
- package/commerce/ui/store.ts +304 -304
- package/components/access-code-input.tsx +71 -71
- package/components/auth/auth-listener.tsx +29 -29
- package/components/auth/auth-token/clear-auth-token.tsx +12 -12
- package/components/auth/auth-token/set-auth-token.tsx +16 -16
- package/components/auth/common-auth-domains.ts +16 -16
- package/components/auth/login-panel.tsx +107 -107
- package/components/back-button.tsx +42 -42
- package/components/chat-widget.tsx +85 -85
- package/components/commerce/add-widget.tsx +20 -20
- package/components/commerce/bag-button.tsx +98 -98
- package/components/commerce/buy-button.tsx +34 -34
- package/components/commerce/checkout-button.tsx +129 -129
- package/components/commerce/checkout-panel/dt-bag-carousel.tsx +36 -36
- package/components/commerce/checkout-panel/dt-checkout-panel.tsx +84 -84
- package/components/commerce/checkout-panel/index.tsx +129 -129
- package/components/commerce/checkout-panel/links-row.tsx +21 -21
- package/components/commerce/checkout-panel/mb-checkout-panel.tsx +54 -54
- package/components/commerce/checkout-panel/steps-indicator.tsx +39 -39
- package/components/commerce/checkout-panel/thank-you.tsx +18 -18
- package/components/commerce/checkout-widget/const.ts +13 -13
- package/components/commerce/checkout-widget/index.tsx +192 -192
- package/components/commerce/checkout-widget/obs-string-set.ts +48 -48
- package/components/commerce/checkout-widget/use-anim-clx-set.ts +58 -58
- package/components/commerce/desktop-bag-popup.tsx +78 -78
- package/components/commerce/desktop-nav-menu.tsx +130 -130
- package/components/commerce/drawer/index.tsx +99 -99
- package/components/commerce/drawer/micro.tsx +144 -144
- package/components/commerce/drawer/shell.tsx +85 -85
- package/components/commerce/mobile-bag-drawer.tsx +51 -51
- package/components/commerce/mobile-login-button.tsx +101 -101
- package/components/commerce/mobile-menu-toggle-button.tsx +35 -35
- package/components/commerce/mobile-nav-menu-ai.tsx +48 -48
- package/components/commerce/mobile-nav-menu-item.tsx +49 -49
- package/components/commerce/mobile-nav-menu.tsx +101 -101
- package/components/contact-dialog/contact-form.tsx +113 -113
- package/components/contact-dialog/disclaimer.tsx +13 -13
- package/components/contact-dialog/index.tsx +64 -64
- package/components/copyright.tsx +21 -21
- package/components/drawer-margin.tsx +25 -25
- package/components/footer.tsx +77 -77
- package/components/header/desktop.tsx +50 -50
- package/components/header/index.tsx +52 -52
- package/components/header/mobile.tsx +163 -163
- package/components/header/theme-toggle.tsx +26 -26
- package/components/icons/24k-gold-card.tsx +43 -43
- package/components/icons/ai-chat-act.tsx +47 -47
- package/components/icons/ai-chat.tsx +29 -29
- package/components/icons/anodized-titanium.tsx +45 -45
- package/components/icons/avatar.tsx +11 -11
- package/components/icons/bag-icon.tsx +10 -10
- package/components/icons/blog-act.tsx +14 -14
- package/components/icons/blog.tsx +20 -20
- package/components/icons/bridge-act.tsx +18 -18
- package/components/icons/bridge.tsx +68 -68
- package/components/icons/changelog-act.tsx +15 -15
- package/components/icons/changelog.tsx +21 -21
- package/components/icons/chrome.tsx +45 -45
- package/components/icons/coins-act.tsx +29 -29
- package/components/icons/coins.tsx +20 -20
- package/components/icons/compare-cards-act.tsx +30 -30
- package/components/icons/compare-cards.tsx +21 -21
- package/components/icons/credit-act.tsx +29 -29
- package/components/icons/credit.tsx +20 -20
- package/components/icons/customer-support-act.tsx +27 -27
- package/components/icons/customer-support.tsx +21 -21
- package/components/icons/customers-act.tsx +65 -65
- package/components/icons/customers.tsx +33 -33
- package/components/icons/developer-docs-act.tsx +26 -26
- package/components/icons/developer-docs.tsx +20 -20
- package/components/icons/exchange-act.tsx +27 -27
- package/components/icons/exchange.tsx +21 -21
- package/components/icons/explorer-act.tsx +27 -27
- package/components/icons/explorer.tsx +22 -22
- package/components/icons/faqs-act.tsx +27 -27
- package/components/icons/faqs.tsx +21 -21
- package/components/icons/github.tsx +14 -14
- package/components/icons/guides-act.tsx +26 -26
- package/components/icons/guides.tsx +21 -21
- package/components/icons/gun-metal.tsx +44 -44
- package/components/icons/index.tsx +43 -43
- package/components/icons/integrations-act.tsx +41 -41
- package/components/icons/integrations.tsx +25 -25
- package/components/icons/irradescent.tsx +41 -41
- package/components/icons/launch-subnet.tsx +21 -21
- package/components/icons/launchsubnet-act.tsx +29 -29
- package/components/icons/left-arrow.tsx +11 -11
- package/components/icons/lux-finance-act.tsx +34 -34
- package/components/icons/lux-finance.tsx +23 -23
- package/components/icons/lux-logo.tsx +10 -10
- package/components/icons/lux-pass-act.tsx +41 -41
- package/components/icons/lux-pass.tsx +25 -25
- package/components/icons/lux-quests-act.tsx +15 -15
- package/components/icons/lux-quests.tsx +21 -21
- package/components/icons/market-act.tsx +39 -39
- package/components/icons/market.tsx +24 -24
- package/components/icons/mirrored-titanium.tsx +46 -46
- package/components/icons/more-benefits-act.tsx +29 -29
- package/components/icons/more-benefits.tsx +21 -21
- package/components/icons/open-source-act.tsx +41 -41
- package/components/icons/open-source.tsx +26 -26
- package/components/icons/right-arrow.tsx +10 -10
- package/components/icons/safe-act.tsx +77 -77
- package/components/icons/safe.tsx +37 -37
- package/components/icons/search.tsx +12 -12
- package/components/icons/secure-delivery.tsx +13 -13
- package/components/icons/shop-act.tsx +29 -29
- package/components/icons/shop.tsx +20 -20
- package/components/icons/social-icon.tsx +35 -35
- package/components/icons/social-svg.css +3 -3
- package/components/icons/sterling-silver-card.tsx +44 -44
- package/components/icons/templates-act.tsx +29 -29
- package/components/icons/templates.tsx +21 -21
- package/components/icons/validators-act.tsx +42 -42
- package/components/icons/validators.tsx +41 -41
- package/components/icons/view-all-card-act.tsx +28 -28
- package/components/icons/view-all-card.tsx +20 -20
- package/components/icons/wallet-act.tsx +29 -29
- package/components/icons/wallet.tsx +20 -20
- package/components/icons/warpcast.tsx +58 -58
- package/components/icons/youtube-logo.tsx +59 -59
- package/components/index.ts +27 -27
- package/components/logo.tsx +89 -89
- package/components/main.tsx +27 -27
- package/components/mini-chart/index.tsx +7 -7
- package/components/mini-chart/mini-chart-props.ts +43 -43
- package/components/mini-chart/mini-chart.tsx +85 -85
- package/components/mini-chart/wrapper.tsx +23 -23
- package/components/not-found/index.tsx +28 -28
- package/components/not-found/not-found-content.mdx +5 -5
- package/components/scripts.tsx +24 -24
- package/components/tooltip.tsx +31 -31
- package/environment.d.ts +5 -5
- package/next/analytics/fpixel.ts +15 -15
- package/next/analytics/google-analytics.ts +13 -13
- package/next/analytics/index.ts +3 -3
- package/next/analytics/pixel-analytics.tsx +54 -54
- package/next/font/get-app-router-font-classes.ts +12 -12
- package/next/font/load-and-return-lux-next-fonts-on-import.ts +68 -68
- package/next/font/next-font-desc.ts +27 -27
- package/next/font/pages-router-font-vars.tsx +18 -18
- package/next/head-metadata/from-next/metadata-types.ts +158 -158
- package/next/head-metadata/from-next/opengraph-types.ts +267 -267
- package/next/head-metadata/from-next/twitter-types.ts +92 -92
- package/next/head-metadata/index.tsx +208 -208
- package/next/middleware/determine-device-mw.ts +16 -16
- package/package.json +79 -79
- package/root-layout/WHY_THIS_IS_SEPARATE.txt +1 -1
- package/root-layout/index.tsx +112 -112
- package/server-actions/firebase-app.ts +14 -14
- package/server-actions/index.ts +5 -5
- package/server-actions/store-contact.ts +51 -51
- package/site-def/footer/community.tsx +67 -67
- package/site-def/footer/company.ts +37 -37
- package/site-def/footer/ecosystem.ts +37 -37
- package/site-def/footer/index.tsx +26 -26
- package/site-def/footer/legal.ts +28 -28
- package/site-def/footer/network.ts +45 -45
- package/site-def/footer/svg/warpcast-logo.svg +11 -11
- package/site-def/index.ts +2 -2
- package/site-def/main-nav.tsx +458 -458
- package/style/cart-animation.css +29 -29
- package/style/checkout-animation.css +23 -23
- package/style/drawer-handle-overrides.css +160 -160
- package/style/lux-colors.css +85 -85
- package/style/lux-global.css +47 -47
- package/tailwind/fontFamily.tailwind.lux.ts +18 -18
- package/tailwind/index.ts +2 -2
- package/tailwind/lux-tw-fonts.ts +39 -39
- package/tailwind/tailwind.config.lux-preset.ts +10 -10
- package/tsconfig.json +15 -15
- package/types/chatbot-config.ts +6 -6
- package/types/chatbot-suggested-question.ts +7 -7
- package/types/contact-info.ts +10 -10
- package/types/index.ts +4 -4
- package/types/site-def.ts +43 -43
|
@@ -1,102 +1,102 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
import React from "react"
|
|
3
|
-
import { observer } from "mobx-react-lite"
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
Button,
|
|
7
|
-
LinkElement,
|
|
8
|
-
Popover,
|
|
9
|
-
PopoverContent,
|
|
10
|
-
PopoverTrigger,
|
|
11
|
-
Separator
|
|
12
|
-
} from '@hanzo/ui/primitives'
|
|
13
|
-
|
|
14
|
-
import type { LinkDef } from '@hanzo/ui/types'
|
|
15
|
-
import { cn } from '@hanzo/ui/util'
|
|
16
|
-
|
|
17
|
-
import { useAuth } from "@hanzo/auth/service"
|
|
18
|
-
|
|
19
|
-
import { Ethereum } from "@hanzo/auth/icons"
|
|
20
|
-
import { Icons } from ".."
|
|
21
|
-
|
|
22
|
-
const MobileAuthWidget: React.FC<{
|
|
23
|
-
noLogin?: boolean
|
|
24
|
-
className?: string
|
|
25
|
-
handleLogin?: () => void
|
|
26
|
-
}> = observer(({
|
|
27
|
-
noLogin = false,
|
|
28
|
-
className
|
|
29
|
-
}) => {
|
|
30
|
-
const auth = useAuth()
|
|
31
|
-
const handleLogin = () => {
|
|
32
|
-
window.location.href = "https://lux.id";
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
if (!auth) {
|
|
36
|
-
return null
|
|
37
|
-
}
|
|
38
|
-
if (!auth.loggedIn && typeof window !== 'undefined') {
|
|
39
|
-
return (noLogin ? null : (
|
|
40
|
-
(handleLogin) ? (
|
|
41
|
-
<div className="flex items-center py-3 px-5 gap-4">
|
|
42
|
-
<Icons.Avatar className='self-center w-6 h-6' />
|
|
43
|
-
<Button
|
|
44
|
-
variant='link'
|
|
45
|
-
className='text-2xl !min-w-0 self-center'
|
|
46
|
-
onClick={handleLogin}
|
|
47
|
-
>
|
|
48
|
-
Log In / Sign Up
|
|
49
|
-
</Button>
|
|
50
|
-
</div>
|
|
51
|
-
) : (
|
|
52
|
-
<LinkElement
|
|
53
|
-
def={{
|
|
54
|
-
href: `${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}?redirectUrl=${window.location.href}`,
|
|
55
|
-
title: 'Login',
|
|
56
|
-
variant: 'primary',
|
|
57
|
-
newTab: false
|
|
58
|
-
} satisfies LinkDef}
|
|
59
|
-
className='h-8 w-fit !min-w-0'
|
|
60
|
-
/>
|
|
61
|
-
)
|
|
62
|
-
))
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
return (
|
|
66
|
-
<Popover>
|
|
67
|
-
<PopoverTrigger asChild>
|
|
68
|
-
<Button
|
|
69
|
-
variant="outline"
|
|
70
|
-
size='icon'
|
|
71
|
-
className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
|
|
72
|
-
>{auth.user?.email[0]}</Button>
|
|
73
|
-
</PopoverTrigger>
|
|
74
|
-
<PopoverContent className='bg-level-0'>
|
|
75
|
-
<div className="grid gap-4">
|
|
76
|
-
<div className="space-y-2 truncate">
|
|
77
|
-
{auth.user?.displayName ? (
|
|
78
|
-
<>
|
|
79
|
-
<h4 className="font-medium leading-none truncate">{auth.user.displayName}</h4>
|
|
80
|
-
<p className="text-sm opacity-50 truncate">{auth.user.email}</p>
|
|
81
|
-
</>
|
|
82
|
-
) : (
|
|
83
|
-
<h4 className="font-medium leading-none truncate">{auth.user?.email}</h4>
|
|
84
|
-
)}
|
|
85
|
-
{auth.user?.walletAddress ? (
|
|
86
|
-
<p className="text-sm opacity-50 truncate">{auth.user.walletAddress}</p>
|
|
87
|
-
) : (
|
|
88
|
-
<Button variant="outline" className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
|
|
89
|
-
<Ethereum height={20} />Connect your wallet
|
|
90
|
-
</Button>
|
|
91
|
-
)}
|
|
92
|
-
</div>
|
|
93
|
-
<Separator />
|
|
94
|
-
<Button variant="outline" onClick={auth.logout.bind(auth)}>Logout</Button>
|
|
95
|
-
</div>
|
|
96
|
-
</PopoverContent>
|
|
97
|
-
</Popover>
|
|
98
|
-
)
|
|
99
|
-
|
|
100
|
-
})
|
|
101
|
-
|
|
1
|
+
'use client'
|
|
2
|
+
import React from "react"
|
|
3
|
+
import { observer } from "mobx-react-lite"
|
|
4
|
+
|
|
5
|
+
import {
|
|
6
|
+
Button,
|
|
7
|
+
LinkElement,
|
|
8
|
+
Popover,
|
|
9
|
+
PopoverContent,
|
|
10
|
+
PopoverTrigger,
|
|
11
|
+
Separator
|
|
12
|
+
} from '@hanzo/ui/primitives'
|
|
13
|
+
|
|
14
|
+
import type { LinkDef } from '@hanzo/ui/types'
|
|
15
|
+
import { cn } from '@hanzo/ui/util'
|
|
16
|
+
|
|
17
|
+
import { useAuth } from "@hanzo/auth/service"
|
|
18
|
+
|
|
19
|
+
import { Ethereum } from "@hanzo/auth/icons"
|
|
20
|
+
import { Icons } from ".."
|
|
21
|
+
|
|
22
|
+
const MobileAuthWidget: React.FC<{
|
|
23
|
+
noLogin?: boolean
|
|
24
|
+
className?: string
|
|
25
|
+
handleLogin?: () => void
|
|
26
|
+
}> = observer(({
|
|
27
|
+
noLogin = false,
|
|
28
|
+
className
|
|
29
|
+
}) => {
|
|
30
|
+
const auth = useAuth()
|
|
31
|
+
const handleLogin = () => {
|
|
32
|
+
window.location.href = "https://lux.id";
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
if (!auth) {
|
|
36
|
+
return null
|
|
37
|
+
}
|
|
38
|
+
if (!auth.loggedIn && typeof window !== 'undefined') {
|
|
39
|
+
return (noLogin ? null : (
|
|
40
|
+
(handleLogin) ? (
|
|
41
|
+
<div className="flex items-center py-3 px-5 gap-4">
|
|
42
|
+
<Icons.Avatar className='self-center w-6 h-6' />
|
|
43
|
+
<Button
|
|
44
|
+
variant='link'
|
|
45
|
+
className='text-2xl !min-w-0 self-center'
|
|
46
|
+
onClick={handleLogin}
|
|
47
|
+
>
|
|
48
|
+
Log In / Sign Up
|
|
49
|
+
</Button>
|
|
50
|
+
</div>
|
|
51
|
+
) : (
|
|
52
|
+
<LinkElement
|
|
53
|
+
def={{
|
|
54
|
+
href: `${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}?redirectUrl=${window.location.href}`,
|
|
55
|
+
title: 'Login',
|
|
56
|
+
variant: 'primary',
|
|
57
|
+
newTab: false
|
|
58
|
+
} satisfies LinkDef}
|
|
59
|
+
className='h-8 w-fit !min-w-0'
|
|
60
|
+
/>
|
|
61
|
+
)
|
|
62
|
+
))
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<Popover>
|
|
67
|
+
<PopoverTrigger asChild>
|
|
68
|
+
<Button
|
|
69
|
+
variant="outline"
|
|
70
|
+
size='icon'
|
|
71
|
+
className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
|
|
72
|
+
>{auth.user?.email[0]}</Button>
|
|
73
|
+
</PopoverTrigger>
|
|
74
|
+
<PopoverContent className='bg-level-0'>
|
|
75
|
+
<div className="grid gap-4">
|
|
76
|
+
<div className="space-y-2 truncate">
|
|
77
|
+
{auth.user?.displayName ? (
|
|
78
|
+
<>
|
|
79
|
+
<h4 className="font-medium leading-none truncate">{auth.user.displayName}</h4>
|
|
80
|
+
<p className="text-sm opacity-50 truncate">{auth.user.email}</p>
|
|
81
|
+
</>
|
|
82
|
+
) : (
|
|
83
|
+
<h4 className="font-medium leading-none truncate">{auth.user?.email}</h4>
|
|
84
|
+
)}
|
|
85
|
+
{auth.user?.walletAddress ? (
|
|
86
|
+
<p className="text-sm opacity-50 truncate">{auth.user.walletAddress}</p>
|
|
87
|
+
) : (
|
|
88
|
+
<Button variant="outline" className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
|
|
89
|
+
<Ethereum height={20} />Connect your wallet
|
|
90
|
+
</Button>
|
|
91
|
+
)}
|
|
92
|
+
</div>
|
|
93
|
+
<Separator />
|
|
94
|
+
<Button variant="outline" onClick={auth.logout.bind(auth)}>Logout</Button>
|
|
95
|
+
</div>
|
|
96
|
+
</PopoverContent>
|
|
97
|
+
</Popover>
|
|
98
|
+
)
|
|
99
|
+
|
|
100
|
+
})
|
|
101
|
+
|
|
102
102
|
export default MobileAuthWidget
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
import React, { useState } from 'react'
|
|
3
|
-
|
|
4
|
-
import { Plus } from 'lucide-react'
|
|
5
|
-
|
|
6
|
-
import { Button } from '@hanzo/ui/primitives'
|
|
7
|
-
import { cn } from '@hanzo/ui/util'
|
|
8
|
-
|
|
9
|
-
const MobileMenuToggleButton: React.FC<{
|
|
10
|
-
open: boolean
|
|
11
|
-
setOpen: (b: boolean) => void
|
|
12
|
-
className?: string
|
|
13
|
-
}> = ({
|
|
14
|
-
open,
|
|
15
|
-
setOpen,
|
|
16
|
-
className=''
|
|
17
|
-
}) => {
|
|
18
|
-
|
|
19
|
-
return (
|
|
20
|
-
<Button
|
|
21
|
-
variant='ghost'
|
|
22
|
-
size='default'
|
|
23
|
-
rounded='full'
|
|
24
|
-
onClick={() => {setOpen(!open)}}
|
|
25
|
-
className={cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className)}
|
|
26
|
-
>
|
|
27
|
-
<Plus width={28} height={28} className={
|
|
28
|
-
'block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] ' +
|
|
29
|
-
(open ? 'rotate-[135deg] scale-110' : 'rotate-none')
|
|
30
|
-
} />
|
|
31
|
-
</Button>
|
|
32
|
-
)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export default MobileMenuToggleButton
|
|
1
|
+
'use client'
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
|
|
4
|
+
import { Plus } from 'lucide-react'
|
|
5
|
+
|
|
6
|
+
import { Button } from '@hanzo/ui/primitives'
|
|
7
|
+
import { cn } from '@hanzo/ui/util'
|
|
8
|
+
|
|
9
|
+
const MobileMenuToggleButton: React.FC<{
|
|
10
|
+
open: boolean
|
|
11
|
+
setOpen: (b: boolean) => void
|
|
12
|
+
className?: string
|
|
13
|
+
}> = ({
|
|
14
|
+
open,
|
|
15
|
+
setOpen,
|
|
16
|
+
className=''
|
|
17
|
+
}) => {
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Button
|
|
21
|
+
variant='ghost'
|
|
22
|
+
size='default'
|
|
23
|
+
rounded='full'
|
|
24
|
+
onClick={() => {setOpen(!open)}}
|
|
25
|
+
className={cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className)}
|
|
26
|
+
>
|
|
27
|
+
<Plus width={28} height={28} className={
|
|
28
|
+
'block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] ' +
|
|
29
|
+
(open ? 'rotate-[135deg] scale-110' : 'rotate-none')
|
|
30
|
+
} />
|
|
31
|
+
</Button>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export default MobileMenuToggleButton
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
import React, { useState } from 'react'
|
|
3
|
-
import { ArrowRight, Plus } from 'lucide-react'
|
|
4
|
-
import { Search } from '../icons'
|
|
5
|
-
import { Button, Card } from '@hanzo/ui/primitives'
|
|
6
|
-
import { Logo } from '..'
|
|
7
|
-
|
|
8
|
-
interface MobileNavMenuAIProps {
|
|
9
|
-
setMenuOpen: (open: boolean) => void
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
|
|
13
|
-
const [isOpen, setIsOpen] = useState<boolean>(false)
|
|
14
|
-
|
|
15
|
-
return (
|
|
16
|
-
<>
|
|
17
|
-
<div className="w-full px-[10.8px] py-4 text-2xl cursor-pointer">
|
|
18
|
-
<div className='flex justify-between'>
|
|
19
|
-
<Logo variant='text-only' />
|
|
20
|
-
<Plus className='w-[17.7px] h-[17.7px] flex-none rotate-45 transition-transform' onClick={() => setMenuOpen(false)} />
|
|
21
|
-
</div>
|
|
22
|
-
<div className="flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-2xl bg-muted-4">
|
|
23
|
-
<div className="text-muted-1 font-bold flex-1 flex justify-between h-9 items-center" onClick={() => setIsOpen(true)}>
|
|
24
|
-
<span className='text-base pl-2 font-light'>Ask AI a question</span>
|
|
25
|
-
<ArrowRight />
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
<div className={
|
|
30
|
-
'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
|
|
31
|
-
'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
|
|
32
|
-
(isOpen ? 'flex' : 'hidden')
|
|
33
|
-
}>
|
|
34
|
-
<Card className='flex flex-col h-full w-full'>
|
|
35
|
-
<div className='flex px-4 py-2 h-16 bg-level-0 items-center justify-between'>
|
|
36
|
-
<h3 className='font-semibold font-heading'>LUX<span className='opacity-60'>AI</span></h3>
|
|
37
|
-
<Button onClick={() => setIsOpen(false)} variant='link' size='icon' className='w-fit sm:hidden'>
|
|
38
|
-
<Plus className='w-6 h-6 flex-none mr-1 rotate-45 transition-transform'/>
|
|
39
|
-
</Button>
|
|
40
|
-
</div>
|
|
41
|
-
<iframe src="https://lux.chat/iframe" className='h-full' />
|
|
42
|
-
</Card>
|
|
43
|
-
</div>
|
|
44
|
-
|
|
45
|
-
</>
|
|
46
|
-
)
|
|
47
|
-
};
|
|
48
|
-
|
|
1
|
+
'use client'
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
import { ArrowRight, Plus } from 'lucide-react'
|
|
4
|
+
import { Search } from '../icons'
|
|
5
|
+
import { Button, Card } from '@hanzo/ui/primitives'
|
|
6
|
+
import { Logo } from '..'
|
|
7
|
+
|
|
8
|
+
interface MobileNavMenuAIProps {
|
|
9
|
+
setMenuOpen: (open: boolean) => void
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
|
|
13
|
+
const [isOpen, setIsOpen] = useState<boolean>(false)
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<>
|
|
17
|
+
<div className="w-full px-[10.8px] py-4 text-2xl cursor-pointer">
|
|
18
|
+
<div className='flex justify-between'>
|
|
19
|
+
<Logo variant='text-only' />
|
|
20
|
+
<Plus className='w-[17.7px] h-[17.7px] flex-none rotate-45 transition-transform' onClick={() => setMenuOpen(false)} />
|
|
21
|
+
</div>
|
|
22
|
+
<div className="flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-2xl bg-muted-4">
|
|
23
|
+
<div className="text-muted-1 font-bold flex-1 flex justify-between h-9 items-center" onClick={() => setIsOpen(true)}>
|
|
24
|
+
<span className='text-base pl-2 font-light'>Ask AI a question</span>
|
|
25
|
+
<ArrowRight />
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
<div className={
|
|
30
|
+
'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
|
|
31
|
+
'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
|
|
32
|
+
(isOpen ? 'flex' : 'hidden')
|
|
33
|
+
}>
|
|
34
|
+
<Card className='flex flex-col h-full w-full'>
|
|
35
|
+
<div className='flex px-4 py-2 h-16 bg-level-0 items-center justify-between'>
|
|
36
|
+
<h3 className='font-semibold font-heading'>LUX<span className='opacity-60'>AI</span></h3>
|
|
37
|
+
<Button onClick={() => setIsOpen(false)} variant='link' size='icon' className='w-fit sm:hidden'>
|
|
38
|
+
<Plus className='w-6 h-6 flex-none mr-1 rotate-45 transition-transform'/>
|
|
39
|
+
</Button>
|
|
40
|
+
</div>
|
|
41
|
+
<iframe src="https://lux.chat/iframe" className='h-full' />
|
|
42
|
+
</Card>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
</>
|
|
46
|
+
)
|
|
47
|
+
};
|
|
48
|
+
|
|
49
49
|
export default MobileNavMenuAI;
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
import type { LinkDefExtended } from '../../site-def/main-nav'
|
|
3
|
-
import { RightArrow } from '../icons'
|
|
4
|
-
import LeftArrow from '../icons/left-arrow'
|
|
5
|
-
import Link from 'next/link'
|
|
6
|
-
import MobileNavMenuAI from './mobile-nav-menu-ai'
|
|
7
|
-
|
|
8
|
-
interface MobileNavMenuItemProps {
|
|
9
|
-
link: LinkDefExtended,
|
|
10
|
-
setMenuOpen: (open: boolean) => void
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
|
|
15
|
-
link,
|
|
16
|
-
setMenuOpen
|
|
17
|
-
}) => {
|
|
18
|
-
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|
19
|
-
|
|
20
|
-
return (
|
|
21
|
-
<>
|
|
22
|
-
<div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
|
|
23
|
-
<span className='block w-[18px] h-[22px] items-center'>{link.icon}</span>
|
|
24
|
-
<span className='flex-1'>{link.title}</span>
|
|
25
|
-
<RightArrow className='' />
|
|
26
|
-
</div>
|
|
27
|
-
<div className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
|
|
28
|
-
<MobileNavMenuAI setMenuOpen={setMenuOpen} />
|
|
29
|
-
<div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
|
|
30
|
-
<LeftArrow />
|
|
31
|
-
<span className="text-white">{link.title}</span>
|
|
32
|
-
</div>
|
|
33
|
-
<div className="flex flex-col">
|
|
34
|
-
{link.childMenu?.map((menu, index) => {
|
|
35
|
-
return (
|
|
36
|
-
<Link href={menu.href}>
|
|
37
|
-
<div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
|
|
38
|
-
<span className='w-[18px] h-[22px] self-center flex items-center justify-center'>{menu.icon}</span>
|
|
39
|
-
<span className='flex-1'>{menu.title}</span>
|
|
40
|
-
</div>
|
|
41
|
-
</Link>
|
|
42
|
-
)
|
|
43
|
-
})}
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
46
|
-
</>
|
|
47
|
-
)
|
|
48
|
-
}
|
|
49
|
-
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import type { LinkDefExtended } from '../../site-def/main-nav'
|
|
3
|
+
import { RightArrow } from '../icons'
|
|
4
|
+
import LeftArrow from '../icons/left-arrow'
|
|
5
|
+
import Link from 'next/link'
|
|
6
|
+
import MobileNavMenuAI from './mobile-nav-menu-ai'
|
|
7
|
+
|
|
8
|
+
interface MobileNavMenuItemProps {
|
|
9
|
+
link: LinkDefExtended,
|
|
10
|
+
setMenuOpen: (open: boolean) => void
|
|
11
|
+
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
|
|
15
|
+
link,
|
|
16
|
+
setMenuOpen
|
|
17
|
+
}) => {
|
|
18
|
+
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
|
|
23
|
+
<span className='block w-[18px] h-[22px] items-center'>{link.icon}</span>
|
|
24
|
+
<span className='flex-1'>{link.title}</span>
|
|
25
|
+
<RightArrow className='' />
|
|
26
|
+
</div>
|
|
27
|
+
<div className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
|
|
28
|
+
<MobileNavMenuAI setMenuOpen={setMenuOpen} />
|
|
29
|
+
<div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
|
|
30
|
+
<LeftArrow />
|
|
31
|
+
<span className="text-white">{link.title}</span>
|
|
32
|
+
</div>
|
|
33
|
+
<div className="flex flex-col">
|
|
34
|
+
{link.childMenu?.map((menu, index) => {
|
|
35
|
+
return (
|
|
36
|
+
<Link href={menu.href}>
|
|
37
|
+
<div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
|
|
38
|
+
<span className='w-[18px] h-[22px] self-center flex items-center justify-center'>{menu.icon}</span>
|
|
39
|
+
<span className='flex-1'>{menu.title}</span>
|
|
40
|
+
</div>
|
|
41
|
+
</Link>
|
|
42
|
+
)
|
|
43
|
+
})}
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
50
|
export default MobileNavMenuItem
|