@luxfi/core 5.2.14 → 5.3.1

Sign up to get free protection for your applications and to get access to all the features.
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 +107 -101
  34. package/components/commerce/mobile-menu-toggle-button.tsx +35 -35
  35. package/components/commerce/mobile-nav-menu-ai.tsx +51 -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 -17
  42. package/components/drawer-margin.tsx +25 -25
  43. package/components/footer.tsx +77 -77
  44. package/components/header/desktop.tsx +51 -50
  45. package/components/header/index.tsx +50 -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 +50 -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