@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.
Files changed (178) hide show
  1. package/commerce/ui/conf.ts +13 -13
  2. package/commerce/ui/context.tsx +126 -126
  3. package/commerce/ui/store.ts +304 -304
  4. package/components/access-code-input.tsx +71 -71
  5. package/components/auth/auth-listener.tsx +29 -29
  6. package/components/auth/auth-token/clear-auth-token.tsx +12 -12
  7. package/components/auth/auth-token/set-auth-token.tsx +16 -16
  8. package/components/auth/common-auth-domains.ts +16 -16
  9. package/components/auth/login-panel.tsx +107 -107
  10. package/components/back-button.tsx +42 -42
  11. package/components/chat-widget.tsx +85 -85
  12. package/components/commerce/add-widget.tsx +20 -20
  13. package/components/commerce/bag-button.tsx +98 -98
  14. package/components/commerce/buy-button.tsx +34 -34
  15. package/components/commerce/checkout-button.tsx +129 -129
  16. package/components/commerce/checkout-panel/dt-bag-carousel.tsx +36 -36
  17. package/components/commerce/checkout-panel/dt-checkout-panel.tsx +84 -84
  18. package/components/commerce/checkout-panel/index.tsx +129 -129
  19. package/components/commerce/checkout-panel/links-row.tsx +21 -21
  20. package/components/commerce/checkout-panel/mb-checkout-panel.tsx +54 -54
  21. package/components/commerce/checkout-panel/steps-indicator.tsx +39 -39
  22. package/components/commerce/checkout-panel/thank-you.tsx +18 -18
  23. package/components/commerce/checkout-widget/const.ts +13 -13
  24. package/components/commerce/checkout-widget/index.tsx +192 -192
  25. package/components/commerce/checkout-widget/obs-string-set.ts +48 -48
  26. package/components/commerce/checkout-widget/use-anim-clx-set.ts +58 -58
  27. package/components/commerce/desktop-bag-popup.tsx +78 -78
  28. package/components/commerce/desktop-nav-menu.tsx +130 -130
  29. package/components/commerce/drawer/index.tsx +99 -99
  30. package/components/commerce/drawer/micro.tsx +144 -144
  31. package/components/commerce/drawer/shell.tsx +85 -85
  32. package/components/commerce/mobile-bag-drawer.tsx +51 -51
  33. package/components/commerce/mobile-login-button.tsx +101 -101
  34. package/components/commerce/mobile-menu-toggle-button.tsx +35 -35
  35. package/components/commerce/mobile-nav-menu-ai.tsx +48 -48
  36. package/components/commerce/mobile-nav-menu-item.tsx +49 -49
  37. package/components/commerce/mobile-nav-menu.tsx +101 -101
  38. package/components/contact-dialog/contact-form.tsx +113 -113
  39. package/components/contact-dialog/disclaimer.tsx +13 -13
  40. package/components/contact-dialog/index.tsx +64 -64
  41. package/components/copyright.tsx +21 -21
  42. package/components/drawer-margin.tsx +25 -25
  43. package/components/footer.tsx +77 -77
  44. package/components/header/desktop.tsx +50 -50
  45. package/components/header/index.tsx +52 -52
  46. package/components/header/mobile.tsx +163 -163
  47. package/components/header/theme-toggle.tsx +26 -26
  48. package/components/icons/24k-gold-card.tsx +43 -43
  49. package/components/icons/ai-chat-act.tsx +47 -47
  50. package/components/icons/ai-chat.tsx +29 -29
  51. package/components/icons/anodized-titanium.tsx +45 -45
  52. package/components/icons/avatar.tsx +11 -11
  53. package/components/icons/bag-icon.tsx +10 -10
  54. package/components/icons/blog-act.tsx +14 -14
  55. package/components/icons/blog.tsx +20 -20
  56. package/components/icons/bridge-act.tsx +18 -18
  57. package/components/icons/bridge.tsx +68 -68
  58. package/components/icons/changelog-act.tsx +15 -15
  59. package/components/icons/changelog.tsx +21 -21
  60. package/components/icons/chrome.tsx +45 -45
  61. package/components/icons/coins-act.tsx +29 -29
  62. package/components/icons/coins.tsx +20 -20
  63. package/components/icons/compare-cards-act.tsx +30 -30
  64. package/components/icons/compare-cards.tsx +21 -21
  65. package/components/icons/credit-act.tsx +29 -29
  66. package/components/icons/credit.tsx +20 -20
  67. package/components/icons/customer-support-act.tsx +27 -27
  68. package/components/icons/customer-support.tsx +21 -21
  69. package/components/icons/customers-act.tsx +65 -65
  70. package/components/icons/customers.tsx +33 -33
  71. package/components/icons/developer-docs-act.tsx +26 -26
  72. package/components/icons/developer-docs.tsx +20 -20
  73. package/components/icons/exchange-act.tsx +27 -27
  74. package/components/icons/exchange.tsx +21 -21
  75. package/components/icons/explorer-act.tsx +27 -27
  76. package/components/icons/explorer.tsx +22 -22
  77. package/components/icons/faqs-act.tsx +27 -27
  78. package/components/icons/faqs.tsx +21 -21
  79. package/components/icons/github.tsx +14 -14
  80. package/components/icons/guides-act.tsx +26 -26
  81. package/components/icons/guides.tsx +21 -21
  82. package/components/icons/gun-metal.tsx +44 -44
  83. package/components/icons/index.tsx +43 -43
  84. package/components/icons/integrations-act.tsx +41 -41
  85. package/components/icons/integrations.tsx +25 -25
  86. package/components/icons/irradescent.tsx +41 -41
  87. package/components/icons/launch-subnet.tsx +21 -21
  88. package/components/icons/launchsubnet-act.tsx +29 -29
  89. package/components/icons/left-arrow.tsx +11 -11
  90. package/components/icons/lux-finance-act.tsx +34 -34
  91. package/components/icons/lux-finance.tsx +23 -23
  92. package/components/icons/lux-logo.tsx +10 -10
  93. package/components/icons/lux-pass-act.tsx +41 -41
  94. package/components/icons/lux-pass.tsx +25 -25
  95. package/components/icons/lux-quests-act.tsx +15 -15
  96. package/components/icons/lux-quests.tsx +21 -21
  97. package/components/icons/market-act.tsx +39 -39
  98. package/components/icons/market.tsx +24 -24
  99. package/components/icons/mirrored-titanium.tsx +46 -46
  100. package/components/icons/more-benefits-act.tsx +29 -29
  101. package/components/icons/more-benefits.tsx +21 -21
  102. package/components/icons/open-source-act.tsx +41 -41
  103. package/components/icons/open-source.tsx +26 -26
  104. package/components/icons/right-arrow.tsx +10 -10
  105. package/components/icons/safe-act.tsx +77 -77
  106. package/components/icons/safe.tsx +37 -37
  107. package/components/icons/search.tsx +12 -12
  108. package/components/icons/secure-delivery.tsx +13 -13
  109. package/components/icons/shop-act.tsx +29 -29
  110. package/components/icons/shop.tsx +20 -20
  111. package/components/icons/social-icon.tsx +35 -35
  112. package/components/icons/social-svg.css +3 -3
  113. package/components/icons/sterling-silver-card.tsx +44 -44
  114. package/components/icons/templates-act.tsx +29 -29
  115. package/components/icons/templates.tsx +21 -21
  116. package/components/icons/validators-act.tsx +42 -42
  117. package/components/icons/validators.tsx +41 -41
  118. package/components/icons/view-all-card-act.tsx +28 -28
  119. package/components/icons/view-all-card.tsx +20 -20
  120. package/components/icons/wallet-act.tsx +29 -29
  121. package/components/icons/wallet.tsx +20 -20
  122. package/components/icons/warpcast.tsx +58 -58
  123. package/components/icons/youtube-logo.tsx +59 -59
  124. package/components/index.ts +27 -27
  125. package/components/logo.tsx +89 -89
  126. package/components/main.tsx +27 -27
  127. package/components/mini-chart/index.tsx +7 -7
  128. package/components/mini-chart/mini-chart-props.ts +43 -43
  129. package/components/mini-chart/mini-chart.tsx +85 -85
  130. package/components/mini-chart/wrapper.tsx +23 -23
  131. package/components/not-found/index.tsx +28 -28
  132. package/components/not-found/not-found-content.mdx +5 -5
  133. package/components/scripts.tsx +24 -24
  134. package/components/tooltip.tsx +31 -31
  135. package/environment.d.ts +5 -5
  136. package/next/analytics/fpixel.ts +15 -15
  137. package/next/analytics/google-analytics.ts +13 -13
  138. package/next/analytics/index.ts +3 -3
  139. package/next/analytics/pixel-analytics.tsx +54 -54
  140. package/next/font/get-app-router-font-classes.ts +12 -12
  141. package/next/font/load-and-return-lux-next-fonts-on-import.ts +68 -68
  142. package/next/font/next-font-desc.ts +27 -27
  143. package/next/font/pages-router-font-vars.tsx +18 -18
  144. package/next/head-metadata/from-next/metadata-types.ts +158 -158
  145. package/next/head-metadata/from-next/opengraph-types.ts +267 -267
  146. package/next/head-metadata/from-next/twitter-types.ts +92 -92
  147. package/next/head-metadata/index.tsx +208 -208
  148. package/next/middleware/determine-device-mw.ts +16 -16
  149. package/package.json +79 -79
  150. package/root-layout/WHY_THIS_IS_SEPARATE.txt +1 -1
  151. package/root-layout/index.tsx +112 -112
  152. package/server-actions/firebase-app.ts +14 -14
  153. package/server-actions/index.ts +5 -5
  154. package/server-actions/store-contact.ts +51 -51
  155. package/site-def/footer/community.tsx +67 -67
  156. package/site-def/footer/company.ts +37 -37
  157. package/site-def/footer/ecosystem.ts +37 -37
  158. package/site-def/footer/index.tsx +26 -26
  159. package/site-def/footer/legal.ts +28 -28
  160. package/site-def/footer/network.ts +45 -45
  161. package/site-def/footer/svg/warpcast-logo.svg +11 -11
  162. package/site-def/index.ts +2 -2
  163. package/site-def/main-nav.tsx +458 -458
  164. package/style/cart-animation.css +29 -29
  165. package/style/checkout-animation.css +23 -23
  166. package/style/drawer-handle-overrides.css +160 -160
  167. package/style/lux-colors.css +85 -85
  168. package/style/lux-global.css +47 -47
  169. package/tailwind/fontFamily.tailwind.lux.ts +18 -18
  170. package/tailwind/index.ts +2 -2
  171. package/tailwind/lux-tw-fonts.ts +39 -39
  172. package/tailwind/tailwind.config.lux-preset.ts +10 -10
  173. package/tsconfig.json +15 -15
  174. package/types/chatbot-config.ts +6 -6
  175. package/types/chatbot-suggested-question.ts +7 -7
  176. package/types/contact-info.ts +10 -10
  177. package/types/index.ts +4 -4
  178. package/types/site-def.ts +43 -43
@@ -1,71 +1,71 @@
1
- 'use client'
2
-
3
- import { useState } from 'react'
4
- import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@hanzo/ui/primitives'
5
- import { cn } from '@hanzo/ui/util'
6
-
7
- const AccessCodeInput: React.FC<{
8
- onSuccess?: () => void
9
- onFail?: () => void
10
- validCodes?: string[]
11
- className?: string
12
- }> = ({
13
- onSuccess,
14
- onFail,
15
- validCodes,
16
- className
17
- }) => {
18
- const [status, setStatus] = useState<'valid' | 'invalid' | 'checking' | undefined>()
19
-
20
- const checkAccessCode = (code: string) => {
21
- setStatus(undefined)
22
- if (code.length === 6) {
23
- setStatus('checking')
24
- setTimeout(() => {
25
- if (validCodes?.includes(code) && onSuccess) {
26
- setStatus('valid')
27
- onSuccess()
28
- }
29
- else {
30
- setStatus('invalid')
31
- onFail && onFail()
32
- }
33
- }, 1000)
34
- }
35
- }
36
-
37
- return (
38
- <div className={cn('flex flex-col gap-2 mx-auto w-full text-center items-center', className)}>
39
- <InputOTP
40
- className='mx-auto'
41
- maxLength={6}
42
- onInput={(event) => checkAccessCode((event.target as HTMLInputElement).value)}
43
- render={({ slots }) => (
44
- <>
45
- <InputOTPGroup>
46
- {slots.slice(0, 3).map((slot, index) => (
47
- <InputOTPSlot key={index} {...slot} />
48
- ))}{" "}
49
- </InputOTPGroup>
50
- <InputOTPSeparator />
51
- <InputOTPGroup>
52
- {slots.slice(3).map((slot, index) => (
53
- <InputOTPSlot key={index + 3} {...slot} />
54
- ))}
55
- </InputOTPGroup>
56
- </>
57
- )}
58
- />
59
- <p className='h-[3rem]'>
60
- {
61
- status === 'checking' ? 'Checking access code...' :
62
- status === 'invalid' ? <span className='text-destructive'>Invalid access code!</span> :
63
- status === 'valid' ? <span>Access code is valid! Redirecting...</span> :
64
- null
65
- }
66
- </p>
67
- </div>
68
- )
69
- }
70
-
71
- export default AccessCodeInput
1
+ 'use client'
2
+
3
+ import { useState } from 'react'
4
+ import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@hanzo/ui/primitives'
5
+ import { cn } from '@hanzo/ui/util'
6
+
7
+ const AccessCodeInput: React.FC<{
8
+ onSuccess?: () => void
9
+ onFail?: () => void
10
+ validCodes?: string[]
11
+ className?: string
12
+ }> = ({
13
+ onSuccess,
14
+ onFail,
15
+ validCodes,
16
+ className
17
+ }) => {
18
+ const [status, setStatus] = useState<'valid' | 'invalid' | 'checking' | undefined>()
19
+
20
+ const checkAccessCode = (code: string) => {
21
+ setStatus(undefined)
22
+ if (code.length === 6) {
23
+ setStatus('checking')
24
+ setTimeout(() => {
25
+ if (validCodes?.includes(code) && onSuccess) {
26
+ setStatus('valid')
27
+ onSuccess()
28
+ }
29
+ else {
30
+ setStatus('invalid')
31
+ onFail && onFail()
32
+ }
33
+ }, 1000)
34
+ }
35
+ }
36
+
37
+ return (
38
+ <div className={cn('flex flex-col gap-2 mx-auto w-full text-center items-center', className)}>
39
+ <InputOTP
40
+ className='mx-auto'
41
+ maxLength={6}
42
+ onInput={(event) => checkAccessCode((event.target as HTMLInputElement).value)}
43
+ render={({ slots }) => (
44
+ <>
45
+ <InputOTPGroup>
46
+ {slots.slice(0, 3).map((slot, index) => (
47
+ <InputOTPSlot key={index} {...slot} />
48
+ ))}{" "}
49
+ </InputOTPGroup>
50
+ <InputOTPSeparator />
51
+ <InputOTPGroup>
52
+ {slots.slice(3).map((slot, index) => (
53
+ <InputOTPSlot key={index + 3} {...slot} />
54
+ ))}
55
+ </InputOTPGroup>
56
+ </>
57
+ )}
58
+ />
59
+ <p className='h-[3rem]'>
60
+ {
61
+ status === 'checking' ? 'Checking access code...' :
62
+ status === 'invalid' ? <span className='text-destructive'>Invalid access code!</span> :
63
+ status === 'valid' ? <span>Access code is valid! Redirecting...</span> :
64
+ null
65
+ }
66
+ </p>
67
+ </div>
68
+ )
69
+ }
70
+
71
+ export default AccessCodeInput
@@ -1,29 +1,29 @@
1
- 'use client'
2
-
3
- import { useEffect } from 'react'
4
- import { useAuth } from '@hanzo/auth/service'
5
- import { getCookie } from 'cookies-next'
6
-
7
- const AuthListener = () => {
8
- const auth = useAuth()
9
-
10
- useEffect(() => {
11
- fetch(`${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}/api/auth/get-auth-token`, {
12
- method: 'GET',
13
- credentials: 'include',
14
- })
15
- .then(response => response.json())
16
- .then((data: any) => {
17
- const token = getCookie('auth-token')
18
- console.log(data)
19
- console.log(token)
20
- if (!!token) {
21
- auth.loginWithCustomToken(token)
22
- }
23
- })
24
- }, [auth])
25
-
26
- return ( <></> )
27
- }
28
-
29
- export default AuthListener
1
+ 'use client'
2
+
3
+ import { useEffect } from 'react'
4
+ import { useAuth } from '@hanzo/auth/service'
5
+ import { getCookie } from 'cookies-next'
6
+
7
+ const AuthListener = () => {
8
+ const auth = useAuth()
9
+
10
+ useEffect(() => {
11
+ fetch(`${process.env.NEXT_PUBLIC_LOGIN_SITE_URL}/api/auth/get-auth-token`, {
12
+ method: 'GET',
13
+ credentials: 'include',
14
+ })
15
+ .then(response => response.json())
16
+ .then((data: any) => {
17
+ const token = getCookie('auth-token')
18
+ console.log(data)
19
+ console.log(token)
20
+ if (!!token) {
21
+ auth.loginWithCustomToken(token)
22
+ }
23
+ })
24
+ }, [auth])
25
+
26
+ return ( <></> )
27
+ }
28
+
29
+ export default AuthListener
@@ -1,12 +1,12 @@
1
- import domains from '../common-auth-domains'
2
-
3
- const ClearAuthToken = () => {
4
- return (<>
5
- {domains.map(({url}) => (
6
- /* Clear auth-token cookie across all Lux domains */
7
- <img src={`${url}/api/auth/clear-auth-token`} className='absolute hidden'/>
8
- ))}
9
- </>)
10
- }
11
-
12
- export default ClearAuthToken
1
+ import domains from '../common-auth-domains'
2
+
3
+ const ClearAuthToken = () => {
4
+ return (<>
5
+ {domains.map(({url}) => (
6
+ /* Clear auth-token cookie across all Lux domains */
7
+ <img src={`${url}/api/auth/clear-auth-token`} className='absolute hidden'/>
8
+ ))}
9
+ </>)
10
+ }
11
+
12
+ export default ClearAuthToken
@@ -1,16 +1,16 @@
1
- import domains from '../common-auth-domains'
2
-
3
- const SetAuthToken: React.FC<{
4
- authToken: string
5
- }> = ({
6
- authToken,
7
- }) => {
8
- return (<>
9
- {!!authToken && domains.map(({url}) => (
10
- /* Set auth-token cookie across all Lux domains */
11
- <img src={`${url}/api/auth/set-auth-token?token=${authToken}`} className='absolute hidden'/>
12
- ))}
13
- </>)
14
- }
15
-
16
- export default SetAuthToken
1
+ import domains from '../common-auth-domains'
2
+
3
+ const SetAuthToken: React.FC<{
4
+ authToken: string
5
+ }> = ({
6
+ authToken,
7
+ }) => {
8
+ return (<>
9
+ {!!authToken && domains.map(({url}) => (
10
+ /* Set auth-token cookie across all Lux domains */
11
+ <img src={`${url}/api/auth/set-auth-token?token=${authToken}`} className='absolute hidden'/>
12
+ ))}
13
+ </>)
14
+ }
15
+
16
+ export default SetAuthToken
@@ -1,16 +1,16 @@
1
- const domains = [
2
- { id: 'lux.market', url: 'https://lux.market' },
3
- { id: 'lux.shop', url: 'https://lux.shop' },
4
- { id: 'lux.credit', url: 'https://lux.credit' },
5
- { id: 'lux.network', url: 'https://lux.network' },
6
- { id: 'wallet.lux.network', url: 'https://wallet.lux.network' },
7
- { id: 'safe.lux.network', url: 'https://safe.lux.network' },
8
- { id: 'lux.finance', url: 'https://lux.finance' },
9
- { id: 'lux.exchange', url: 'https://lux.exchange' },
10
- { id: 'lux.quest', url: 'https://lux.quest' },
11
- { id: 'lux.id', url: 'https://lux.id' },
12
- ]
13
-
14
- export {
15
- domains as default
16
- }
1
+ const domains = [
2
+ { id: 'lux.market', url: 'https://lux.market' },
3
+ { id: 'lux.shop', url: 'https://lux.shop' },
4
+ { id: 'lux.credit', url: 'https://lux.credit' },
5
+ { id: 'lux.network', url: 'https://lux.network' },
6
+ { id: 'wallet.lux.network', url: 'https://wallet.lux.network' },
7
+ { id: 'safe.lux.network', url: 'https://safe.lux.network' },
8
+ { id: 'lux.finance', url: 'https://lux.finance' },
9
+ { id: 'lux.exchange', url: 'https://lux.exchange' },
10
+ { id: 'lux.quest', url: 'https://lux.quest' },
11
+ { id: 'lux.id', url: 'https://lux.id' },
12
+ ]
13
+
14
+ export {
15
+ domains as default
16
+ }
@@ -1,107 +1,107 @@
1
- 'use client'
2
-
3
- import Link from 'next/link'
4
- import { useRouter } from 'next/navigation'
5
-
6
- import { setCookie } from 'cookies-next'
7
-
8
- import { cn } from '@hanzo/ui/util'
9
- import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
10
- import { LoginPanel as Login } from '@hanzo/auth/components'
11
-
12
- import Logo from '../logo'
13
- import { EmblaAutoplay } from '..'
14
- import LuxLogo from '../icons/lux-logo'
15
- import { legal } from '../../site-def/footer'
16
-
17
- const LoginPanel: React.FC<{
18
- close: () => void
19
- getStartedUrl?: string
20
- redirectUrl?: string
21
- className?: string
22
- reviews: { text: string, author: string, href: string }[]
23
- }> = ({
24
- close,
25
- getStartedUrl='/',
26
- redirectUrl,
27
- className='',
28
- reviews
29
- }) => {
30
- const router = useRouter()
31
-
32
- const termsOfServiceUrl = legal.find(({title}) => title === 'Terms and Conditions')?.href || ''
33
- const privacyPolicyUrl = legal.find(({title}) => title === 'Privacy Policy')?.href || ''
34
-
35
- // TODO :aa shouldn't this happen in @hanzo/auth: components/LoginPanel ??
36
- // Otherwise, the functionality is split across modules! (and client/fw!)
37
- // (This was never my intent w the onLoginChanged callback.)
38
- const onLogin = (token: string) => {
39
- setCookie('auth-token', token, {
40
- domain: 'lux.id',
41
- path: '/',
42
- sameSite: 'none',
43
- secure: true,
44
- httpOnly: false,
45
- expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
46
- })
47
-
48
- redirectUrl && router.push(redirectUrl)
49
- }
50
-
51
- return (
52
- <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
53
- <div className='hidden md:flex w-full h-full bg-level-1 flex-row items-end justify-end overflow-y-auto min-h-screen'>
54
- <div className='h-full w-full max-w-[750px] px-8 pt-0'>
55
- <div className='h-full w-full max-w-[550px] mx-auto flex flex-col justify-between min-h-screen py-10'>
56
- <Button
57
- variant='ghost'
58
- onClick={close}
59
- className='w-fit !min-w-0 p-2'
60
- >
61
- <Logo size='md' textClx='!cursor-pointer' variant='text-only'/>
62
- </Button>
63
- <Carousel
64
- options={{ align: 'center', loop: true }}
65
- className='w-full'
66
- plugins={[EmblaAutoplay({ delay: 5000, stopOnInteraction: true })]}
67
- >
68
- <CarouselContent>
69
- {reviews.map(({text, author, href}, index) => (
70
- <CarouselItem key={index}>
71
- <Link href={href} className='flex flex-col gap-3 cursor-pointer'>
72
- <p>“{text}“</p>
73
- <p className='text-sm'>{author}</p>
74
- </Link>
75
- </CarouselItem>
76
- ))}
77
- </CarouselContent>
78
- </Carousel>
79
- </div>
80
- </div>
81
- </div>
82
- <div className='w-full h-full bg-background flex flex-row items-center'>
83
- <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0 text-center'>
84
- <div className='relative h-full w-full max-w-[400px] mx-auto flex flex-col gap-4 items-center py-10'>
85
- <Button
86
- variant='ghost'
87
- onClick={close}
88
- className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
89
- >
90
- <LuxLogo className='w-5 h-5'/>
91
- </Button>
92
- <Login
93
- getStartedUrl={getStartedUrl}
94
- redirectUrl={redirectUrl}
95
- className='w-full max-w-sm'
96
- termsOfServiceUrl={termsOfServiceUrl}
97
- privacyPolicyUrl={privacyPolicyUrl}
98
- onLoginChanged={onLogin}
99
- />
100
- </div>
101
- </div>
102
- </div>
103
- </div>
104
- )
105
- }
106
-
107
- export default LoginPanel
1
+ 'use client'
2
+
3
+ import Link from 'next/link'
4
+ import { useRouter } from 'next/navigation'
5
+
6
+ import { setCookie } from 'cookies-next'
7
+
8
+ import { cn } from '@hanzo/ui/util'
9
+ import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
10
+ import { LoginPanel as Login } from '@hanzo/auth/components'
11
+
12
+ import Logo from '../logo'
13
+ import { EmblaAutoplay } from '..'
14
+ import LuxLogo from '../icons/lux-logo'
15
+ import { legal } from '../../site-def/footer'
16
+
17
+ const LoginPanel: React.FC<{
18
+ close: () => void
19
+ getStartedUrl?: string
20
+ redirectUrl?: string
21
+ className?: string
22
+ reviews: { text: string, author: string, href: string }[]
23
+ }> = ({
24
+ close,
25
+ getStartedUrl='/',
26
+ redirectUrl,
27
+ className='',
28
+ reviews
29
+ }) => {
30
+ const router = useRouter()
31
+
32
+ const termsOfServiceUrl = legal.find(({title}) => title === 'Terms and Conditions')?.href || ''
33
+ const privacyPolicyUrl = legal.find(({title}) => title === 'Privacy Policy')?.href || ''
34
+
35
+ // TODO :aa shouldn't this happen in @hanzo/auth: components/LoginPanel ??
36
+ // Otherwise, the functionality is split across modules! (and client/fw!)
37
+ // (This was never my intent w the onLoginChanged callback.)
38
+ const onLogin = (token: string) => {
39
+ setCookie('auth-token', token, {
40
+ domain: 'lux.id',
41
+ path: '/',
42
+ sameSite: 'none',
43
+ secure: true,
44
+ httpOnly: false,
45
+ expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
46
+ })
47
+
48
+ redirectUrl && router.push(redirectUrl)
49
+ }
50
+
51
+ return (
52
+ <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
53
+ <div className='hidden md:flex w-full h-full bg-level-1 flex-row items-end justify-end overflow-y-auto min-h-screen'>
54
+ <div className='h-full w-full max-w-[750px] px-8 pt-0'>
55
+ <div className='h-full w-full max-w-[550px] mx-auto flex flex-col justify-between min-h-screen py-10'>
56
+ <Button
57
+ variant='ghost'
58
+ onClick={close}
59
+ className='w-fit !min-w-0 p-2'
60
+ >
61
+ <Logo size='md' textClx='!cursor-pointer' variant='text-only'/>
62
+ </Button>
63
+ <Carousel
64
+ options={{ align: 'center', loop: true }}
65
+ className='w-full'
66
+ plugins={[EmblaAutoplay({ delay: 5000, stopOnInteraction: true })]}
67
+ >
68
+ <CarouselContent>
69
+ {reviews.map(({text, author, href}, index) => (
70
+ <CarouselItem key={index}>
71
+ <Link href={href} className='flex flex-col gap-3 cursor-pointer'>
72
+ <p>“{text}“</p>
73
+ <p className='text-sm'>{author}</p>
74
+ </Link>
75
+ </CarouselItem>
76
+ ))}
77
+ </CarouselContent>
78
+ </Carousel>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <div className='w-full h-full bg-background flex flex-row items-center'>
83
+ <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0 text-center'>
84
+ <div className='relative h-full w-full max-w-[400px] mx-auto flex flex-col gap-4 items-center py-10'>
85
+ <Button
86
+ variant='ghost'
87
+ onClick={close}
88
+ className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
89
+ >
90
+ <LuxLogo className='w-5 h-5'/>
91
+ </Button>
92
+ <Login
93
+ getStartedUrl={getStartedUrl}
94
+ redirectUrl={redirectUrl}
95
+ className='w-full max-w-sm'
96
+ termsOfServiceUrl={termsOfServiceUrl}
97
+ privacyPolicyUrl={privacyPolicyUrl}
98
+ onLoginChanged={onLogin}
99
+ />
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ )
105
+ }
106
+
107
+ export default LoginPanel
@@ -1,42 +1,42 @@
1
- 'use client'
2
- import React from 'react'
3
- import { useRouter } from 'next/navigation'
4
-
5
- import { ChevronLeft } from 'lucide-react'
6
-
7
-
8
- import {
9
- Button,
10
- buttonVariants,
11
- } from '@hanzo/ui/primitives'
12
-
13
- import type { VariantProps } from '@hanzo/ui/util'
14
-
15
- const BackButton: React.FC<{
16
- variant?: VariantProps<typeof buttonVariants>['variant']
17
- size?: VariantProps<typeof buttonVariants>['size']
18
- clx?: string
19
- iconClx?: string
20
- }> = ({
21
- variant='ghost',
22
- size='default',
23
- clx='',
24
- iconClx='',
25
- }) => {
26
-
27
- const router = useRouter()
28
- const back = () => {router.back()}
29
-
30
- return (
31
- <Button
32
- variant={variant}
33
- size={size}
34
- onClick={back}
35
- className={clx}
36
- >
37
- <ChevronLeft className={iconClx}/>
38
- </Button>
39
- )
40
- }
41
-
42
- export default BackButton
1
+ 'use client'
2
+ import React from 'react'
3
+ import { useRouter } from 'next/navigation'
4
+
5
+ import { ChevronLeft } from 'lucide-react'
6
+
7
+
8
+ import {
9
+ Button,
10
+ buttonVariants,
11
+ } from '@hanzo/ui/primitives'
12
+
13
+ import type { VariantProps } from '@hanzo/ui/util'
14
+
15
+ const BackButton: React.FC<{
16
+ variant?: VariantProps<typeof buttonVariants>['variant']
17
+ size?: VariantProps<typeof buttonVariants>['size']
18
+ clx?: string
19
+ iconClx?: string
20
+ }> = ({
21
+ variant='ghost',
22
+ size='default',
23
+ clx='',
24
+ iconClx='',
25
+ }) => {
26
+
27
+ const router = useRouter()
28
+ const back = () => {router.back()}
29
+
30
+ return (
31
+ <Button
32
+ variant={variant}
33
+ size={size}
34
+ onClick={back}
35
+ className={clx}
36
+ >
37
+ <ChevronLeft className={iconClx}/>
38
+ </Button>
39
+ )
40
+ }
41
+
42
+ export default BackButton