@luxfi/core 5.2.7 → 5.2.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (116) hide show
  1. package/commerce/ui/conf.ts +13 -13
  2. package/commerce/ui/context.tsx +126 -102
  3. package/commerce/ui/store.ts +304 -276
  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 -0
  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 -66
  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 -116
  30. package/components/commerce/drawer/micro.tsx +144 -144
  31. package/components/commerce/drawer/shell.tsx +85 -83
  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 +42 -44
  36. package/components/commerce/mobile-nav-menu-item.tsx +49 -49
  37. package/components/commerce/mobile-nav-menu.tsx +68 -68
  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 +49 -49
  45. package/components/header/index.tsx +52 -52
  46. package/components/header/mobile.tsx +163 -166
  47. package/components/header/theme-toggle.tsx +26 -26
  48. package/components/icons/avatar.tsx +11 -11
  49. package/components/icons/bag-icon.tsx +10 -10
  50. package/components/icons/github.tsx +14 -14
  51. package/components/icons/index.tsx +43 -43
  52. package/components/icons/left-arrow.tsx +11 -11
  53. package/components/icons/lux-logo.tsx +10 -10
  54. package/components/icons/right-arrow.tsx +10 -10
  55. package/components/icons/search.tsx +12 -12
  56. package/components/icons/secure-delivery.tsx +13 -13
  57. package/components/icons/social-icon.tsx +35 -35
  58. package/components/icons/social-svg.css +3 -3
  59. package/components/icons/warpcast.tsx +58 -58
  60. package/components/icons/youtube-logo.tsx +59 -59
  61. package/components/index.ts +27 -25
  62. package/components/logo.tsx +89 -81
  63. package/components/main.tsx +27 -27
  64. package/components/mini-chart/index.tsx +7 -7
  65. package/components/mini-chart/mini-chart-props.ts +43 -43
  66. package/components/mini-chart/mini-chart.tsx +85 -85
  67. package/components/mini-chart/wrapper.tsx +23 -23
  68. package/components/not-found/index.tsx +28 -28
  69. package/components/not-found/not-found-content.mdx +5 -5
  70. package/components/scripts.tsx +24 -24
  71. package/components/tooltip.tsx +31 -0
  72. package/environment.d.ts +5 -5
  73. package/next/analytics/fpixel.ts +15 -15
  74. package/next/analytics/google-analytics.ts +13 -13
  75. package/next/analytics/index.ts +3 -3
  76. package/next/analytics/pixel-analytics.tsx +54 -54
  77. package/next/font/get-app-router-font-classes.ts +12 -12
  78. package/next/font/load-and-return-lux-next-fonts-on-import.ts +68 -68
  79. package/next/font/next-font-desc.ts +27 -27
  80. package/next/font/pages-router-font-vars.tsx +18 -18
  81. package/next/head-metadata/from-next/metadata-types.ts +158 -158
  82. package/next/head-metadata/from-next/opengraph-types.ts +267 -267
  83. package/next/head-metadata/from-next/twitter-types.ts +92 -92
  84. package/next/head-metadata/index.tsx +208 -208
  85. package/next/middleware/determine-device-mw.ts +16 -16
  86. package/package.json +79 -78
  87. package/root-layout/WHY_THIS_IS_SEPARATE.txt +1 -1
  88. package/root-layout/index.tsx +112 -112
  89. package/server-actions/firebase-app.ts +14 -14
  90. package/server-actions/index.ts +5 -5
  91. package/server-actions/store-contact.ts +51 -51
  92. package/site-def/footer/community.tsx +67 -67
  93. package/site-def/footer/company.ts +37 -37
  94. package/site-def/footer/ecosystem.ts +37 -37
  95. package/site-def/footer/index.tsx +26 -26
  96. package/site-def/footer/legal.ts +28 -28
  97. package/site-def/footer/network.ts +45 -45
  98. package/site-def/footer/svg/warpcast-logo.svg +11 -11
  99. package/site-def/index.ts +2 -2
  100. package/site-def/main-nav.tsx +338 -338
  101. package/style/cart-animation.css +29 -29
  102. package/style/checkout-animation.css +23 -23
  103. package/style/drawer-handle-overrides.css +160 -160
  104. package/style/lux-colors.css +85 -85
  105. package/style/lux-global.css +30 -30
  106. package/tailwind/fontFamily.tailwind.lux.ts +18 -18
  107. package/tailwind/index.ts +2 -2
  108. package/tailwind/lux-tw-fonts.ts +39 -39
  109. package/tailwind/tailwind.config.lux-preset.ts +10 -10
  110. package/tsconfig.json +15 -15
  111. package/types/chatbot-config.ts +6 -6
  112. package/types/chatbot-suggested-question.ts +7 -7
  113. package/types/contact-info.ts +10 -10
  114. package/types/index.ts +4 -4
  115. package/types/site-def.ts +43 -43
  116. package/components/commerce/checkout-panel/close-button.tsx +0 -26
@@ -1,113 +1,113 @@
1
- 'use client'
2
-
3
- import React, { useTransition } from 'react'
4
-
5
- import { useForm, type SubmitHandler, type ControllerRenderProps } from 'react-hook-form'
6
- import { z } from 'zod'
7
- import { zodResolver } from '@hookform/resolvers/zod'
8
-
9
- // @ts-ignore
10
- import validator from 'validator'
11
-
12
- import { Loader2 } from 'lucide-react'
13
-
14
- import {
15
- Button,
16
- Input,
17
- Form,
18
- FormControl,
19
- FormField,
20
- FormItem,
21
- FormMessage,
22
- } from '@hanzo/ui/primitives'
23
-
24
- import type { SubmitServerAction } from '@hanzo/ui/types'
25
- import type { ContactInfo } from '../../types'
26
-
27
- const ContactFormSchema = z.object({
28
- email: z
29
- .string()
30
- .min(1, { message: "Email must be provided." })
31
- .email("Invalid email."),
32
- phone: z
33
- .string()
34
- .min(1, { message: "Telephone must be provided." })
35
- .refine(validator.isMobilePhone, { message: "Invalid format." })
36
- })
37
-
38
- type ContactFormSchemaType = z.infer<typeof ContactFormSchema>
39
-
40
- const ContactForm: React.FC<{
41
- onSubmit: (data: ContactFormSchemaType, enc: any) => void
42
- enclosure: any
43
- }> = ({
44
- onSubmit: _onSubmit,
45
- enclosure
46
- }) => {
47
-
48
- const form = useForm<ContactFormSchemaType>({
49
- resolver: zodResolver(ContactFormSchema),
50
- defaultValues: {
51
- email: '',
52
- phone: '',
53
- },
54
- })
55
-
56
- const [isPending, startTransition] = useTransition()
57
-
58
- const onSubmit: SubmitHandler<ContactFormSchemaType> = (data) => {
59
- // https://github.com/orgs/react-hook-form/discussions/10757#discussioncomment-6672403
60
- // @ts-ignore
61
- startTransition(async () => {
62
- await _onSubmit(data, enclosure)
63
- })
64
- }
65
-
66
- const MyFormItem: React.FC<{
67
- field: ControllerRenderProps<ContactFormSchemaType, 'email'> | ControllerRenderProps<ContactFormSchemaType, 'phone'>
68
- placeholder: string
69
- }> = ({
70
- field,
71
- placeholder
72
- }) => (
73
- <FormItem className="space-y-0" >
74
- <FormControl>
75
- <Input placeholder={placeholder} {...field} className="mt-0 text-foreground"/>
76
- </FormControl>
77
- <div className="flex flex-row justify-start items-stretch gap-2">
78
- <FormMessage />
79
- </div>
80
- </FormItem>
81
- )
82
-
83
- return (
84
- <Form {...form}>
85
- <form onSubmit={form.handleSubmit(onSubmit)} className="w-3/4">
86
- <div className='flex flex-col justify-start items-stretch mt-4'>
87
- <FormField
88
- control={form.control}
89
- name='email'
90
- render={({ field }) => ( <MyFormItem field={field} placeholder='email'/> )}
91
- />
92
- <FormField
93
- control={form.control}
94
- name='phone'
95
- // @ts-ignore
96
- render={({ field }) => ( <MyFormItem field={field} placeholder='phone'/> )}
97
- />
98
- <Button disabled={isPending} type='submit' className='bg-primary text-primary-fg hover:bg-primary-hover'>
99
- {isPending ? (<>
100
- <Loader2 className="mr-2 h-4 w-4 animate-spin" />
101
- Please wait
102
- </>
103
- ) : (
104
- <>Submit</>
105
- )}
106
- </Button>
107
- </div>
108
- </form>
109
- </Form>
110
- )
111
- }
112
-
113
- export default ContactForm
1
+ 'use client'
2
+
3
+ import React, { useTransition } from 'react'
4
+
5
+ import { useForm, type SubmitHandler, type ControllerRenderProps } from 'react-hook-form'
6
+ import { z } from 'zod'
7
+ import { zodResolver } from '@hookform/resolvers/zod'
8
+
9
+ // @ts-ignore
10
+ import validator from 'validator'
11
+
12
+ import { Loader2 } from 'lucide-react'
13
+
14
+ import {
15
+ Button,
16
+ Input,
17
+ Form,
18
+ FormControl,
19
+ FormField,
20
+ FormItem,
21
+ FormMessage,
22
+ } from '@hanzo/ui/primitives'
23
+
24
+ import type { SubmitServerAction } from '@hanzo/ui/types'
25
+ import type { ContactInfo } from '../../types'
26
+
27
+ const ContactFormSchema = z.object({
28
+ email: z
29
+ .string()
30
+ .min(1, { message: "Email must be provided." })
31
+ .email("Invalid email."),
32
+ phone: z
33
+ .string()
34
+ .min(1, { message: "Telephone must be provided." })
35
+ .refine(validator.isMobilePhone, { message: "Invalid format." })
36
+ })
37
+
38
+ type ContactFormSchemaType = z.infer<typeof ContactFormSchema>
39
+
40
+ const ContactForm: React.FC<{
41
+ onSubmit: (data: ContactFormSchemaType, enc: any) => void
42
+ enclosure: any
43
+ }> = ({
44
+ onSubmit: _onSubmit,
45
+ enclosure
46
+ }) => {
47
+
48
+ const form = useForm<ContactFormSchemaType>({
49
+ resolver: zodResolver(ContactFormSchema),
50
+ defaultValues: {
51
+ email: '',
52
+ phone: '',
53
+ },
54
+ })
55
+
56
+ const [isPending, startTransition] = useTransition()
57
+
58
+ const onSubmit: SubmitHandler<ContactFormSchemaType> = (data) => {
59
+ // https://github.com/orgs/react-hook-form/discussions/10757#discussioncomment-6672403
60
+ // @ts-ignore
61
+ startTransition(async () => {
62
+ await _onSubmit(data, enclosure)
63
+ })
64
+ }
65
+
66
+ const MyFormItem: React.FC<{
67
+ field: ControllerRenderProps<ContactFormSchemaType, 'email'> | ControllerRenderProps<ContactFormSchemaType, 'phone'>
68
+ placeholder: string
69
+ }> = ({
70
+ field,
71
+ placeholder
72
+ }) => (
73
+ <FormItem className="space-y-0" >
74
+ <FormControl>
75
+ <Input placeholder={placeholder} {...field} className="mt-0 text-foreground"/>
76
+ </FormControl>
77
+ <div className="flex flex-row justify-start items-stretch gap-2">
78
+ <FormMessage />
79
+ </div>
80
+ </FormItem>
81
+ )
82
+
83
+ return (
84
+ <Form {...form}>
85
+ <form onSubmit={form.handleSubmit(onSubmit)} className="w-3/4">
86
+ <div className='flex flex-col justify-start items-stretch mt-4'>
87
+ <FormField
88
+ control={form.control}
89
+ name='email'
90
+ render={({ field }) => ( <MyFormItem field={field} placeholder='email'/> )}
91
+ />
92
+ <FormField
93
+ control={form.control}
94
+ name='phone'
95
+ // @ts-ignore
96
+ render={({ field }) => ( <MyFormItem field={field} placeholder='phone'/> )}
97
+ />
98
+ <Button disabled={isPending} type='submit' className='bg-primary text-primary-fg hover:bg-primary-hover'>
99
+ {isPending ? (<>
100
+ <Loader2 className="mr-2 h-4 w-4 animate-spin" />
101
+ Please wait
102
+ </>
103
+ ) : (
104
+ <>Submit</>
105
+ )}
106
+ </Button>
107
+ </div>
108
+ </form>
109
+ </Form>
110
+ )
111
+ }
112
+
113
+ export default ContactForm
@@ -1,13 +1,13 @@
1
- import React from 'react'
2
-
3
- const Disclaimer: React.FC = () => (
4
- <div>
5
- By entering your mobile number and submitting, you consent to receive text messages from Lux at the number provided.
6
- Message and data rates may apply. Message frequency varies.
7
- You can unsubscribe at any time by replying STOP.
8
- View our <a href='/privacy'>Privacy Policy</a> and <a href='/terms'>Terms & conditions</a>.
9
- </div>
10
- )
11
-
12
- export default Disclaimer
13
-
1
+ import React from 'react'
2
+
3
+ const Disclaimer: React.FC = () => (
4
+ <div>
5
+ By entering your mobile number and submitting, you consent to receive text messages from Lux at the number provided.
6
+ Message and data rates may apply. Message frequency varies.
7
+ You can unsubscribe at any time by replying STOP.
8
+ View our <a href='/privacy'>Privacy Policy</a> and <a href='/terms'>Terms & conditions</a>.
9
+ </div>
10
+ )
11
+
12
+ export default Disclaimer
13
+
@@ -1,64 +1,64 @@
1
- 'use client'
2
-
3
- import React, { useState } from 'react'
4
-
5
- import type { ButtonModalProps} from '@hanzo/ui/types'
6
-
7
- import {
8
- Button,
9
- Dialog,
10
- DialogContent,
11
- DialogDescription,
12
- DialogHeader,
13
- DialogTitle,
14
- DialogTrigger,
15
- } from '@hanzo/ui/primitives'
16
-
17
- import ContactForm from './contact-form'
18
- import Disclaimer from './disclaimer'
19
-
20
- const ContactDialog: React.FC<ButtonModalProps> = ({
21
- open,
22
- onOpenChange,
23
- buttonText,
24
- buttonProps,
25
- title,
26
- byline,
27
- action,
28
- actionEnclosure
29
- }) => {
30
- const [success, setSuccess] = useState(false)
31
-
32
- const onSubmit = async (formData: any, enclosure: any) => {
33
- const result = await action(formData, enclosure)
34
- if (result.success) {
35
- setSuccess(true)
36
- }
37
- }
38
-
39
- return (
40
- <Dialog open={open} onOpenChange={onOpenChange} >
41
- <DialogTrigger asChild>
42
- <Button {...buttonProps} >{buttonText}</Button>
43
- </DialogTrigger>
44
- <DialogContent className="sm:max-w-[500px] p-0 gap-0 bg-background border">
45
- <DialogHeader className='py-6 text-foreground'>
46
- <DialogTitle className='text-4xl text-center text-inherit'>{title}</DialogTitle>
47
- {byline && (<DialogDescription className='text-inherit text-lg text-center'>{byline} </DialogDescription>)}
48
- </DialogHeader>
49
- <div className='px-8 pb-8 rounded-e-lg flex flex-col justify-start items-center'>
50
- {success ? (
51
- <p>{actionEnclosure?.reply}</p>
52
- ) : (
53
- <ContactForm onSubmit={onSubmit} enclosure={actionEnclosure}/>
54
- )}
55
- <div className='text-muted-1 text-xs mt-4' >
56
- <Disclaimer />
57
- </div>
58
- </div>
59
- </DialogContent>
60
- </Dialog>
61
- )
62
- }
63
-
64
- export default ContactDialog
1
+ 'use client'
2
+
3
+ import React, { useState } from 'react'
4
+
5
+ import type { ButtonModalProps} from '@hanzo/ui/types'
6
+
7
+ import {
8
+ Button,
9
+ Dialog,
10
+ DialogContent,
11
+ DialogDescription,
12
+ DialogHeader,
13
+ DialogTitle,
14
+ DialogTrigger,
15
+ } from '@hanzo/ui/primitives'
16
+
17
+ import ContactForm from './contact-form'
18
+ import Disclaimer from './disclaimer'
19
+
20
+ const ContactDialog: React.FC<ButtonModalProps> = ({
21
+ open,
22
+ onOpenChange,
23
+ buttonText,
24
+ buttonProps,
25
+ title,
26
+ byline,
27
+ action,
28
+ actionEnclosure
29
+ }) => {
30
+ const [success, setSuccess] = useState(false)
31
+
32
+ const onSubmit = async (formData: any, enclosure: any) => {
33
+ const result = await action(formData, enclosure)
34
+ if (result.success) {
35
+ setSuccess(true)
36
+ }
37
+ }
38
+
39
+ return (
40
+ <Dialog open={open} onOpenChange={onOpenChange} >
41
+ <DialogTrigger asChild>
42
+ <Button {...buttonProps} >{buttonText}</Button>
43
+ </DialogTrigger>
44
+ <DialogContent className="sm:max-w-[500px] p-0 gap-0 bg-background border">
45
+ <DialogHeader className='py-6 text-foreground'>
46
+ <DialogTitle className='text-4xl text-center text-inherit'>{title}</DialogTitle>
47
+ {byline && (<DialogDescription className='text-inherit text-lg text-center'>{byline} </DialogDescription>)}
48
+ </DialogHeader>
49
+ <div className='px-8 pb-8 rounded-e-lg flex flex-col justify-start items-center'>
50
+ {success ? (
51
+ <p>{actionEnclosure?.reply}</p>
52
+ ) : (
53
+ <ContactForm onSubmit={onSubmit} enclosure={actionEnclosure}/>
54
+ )}
55
+ <div className='text-muted-1 text-xs mt-4' >
56
+ <Disclaimer />
57
+ </div>
58
+ </div>
59
+ </DialogContent>
60
+ </Dialog>
61
+ )
62
+ }
63
+
64
+ export default ContactDialog
@@ -1,21 +1,21 @@
1
- import React from 'react'
2
-
3
- const FIRST = 2020
4
-
5
- const Copyright: React.FC<{
6
- className?: string
7
- }> = ({
8
- className=''
9
- }) => {
10
-
11
- const year = new Date().getFullYear()
12
- const yearString = (year > FIRST) ? `${FIRST} - ${year}` : FIRST.toString()
13
-
14
- return (
15
- <div className={className}>
16
- {`Copyright © ${yearString}`}&nbsp;<br className='sm:hidden'/>Lux Partners Ltd.&nbsp;<br className='md:hidden'/>&nbsp;All rights reserved.
17
- </div>
18
- )
19
- }
20
-
21
- export default Copyright
1
+ import React from 'react'
2
+
3
+ const FIRST = 2020
4
+
5
+ const Copyright: React.FC<{
6
+ className?: string
7
+ }> = ({
8
+ className=''
9
+ }) => {
10
+
11
+ const year = new Date().getFullYear()
12
+ const yearString = (year > FIRST) ? `${FIRST} - ${year}` : FIRST.toString()
13
+
14
+ return (
15
+ <div className={className}>
16
+ {`Copyright © ${yearString}`}&nbsp;<br className='sm:hidden'/>Lux Partners Ltd.&nbsp;<br className='md:hidden'/>&nbsp;All rights reserved.
17
+ </div>
18
+ )
19
+ }
20
+
21
+ export default Copyright
@@ -1,25 +1,25 @@
1
- 'use client'
2
- import React from 'react'
3
-
4
- import { cn } from '@hanzo/ui/util'
5
- import { useCommerceDrawer } from '@luxfi/core/commerce'
6
- import { observer } from 'mobx-react-lite'
7
-
8
- const DrawerMargin: React.FC<{
9
- clx?: string
10
- }> = observer(({
11
- clx=''
12
- }) => {
13
-
14
- const drawer = useCommerceDrawer()
15
- return (
16
- <div
17
- className={cn('transition-height', clx)}
18
- style={{
19
- height: drawer.state === 'micro' ? drawer.microHeight : 0
20
- }}
21
- />
22
- )
23
- })
24
-
25
- export default DrawerMargin
1
+ 'use client'
2
+ import React from 'react'
3
+
4
+ import { cn } from '@hanzo/ui/util'
5
+ import { useCommerceDrawer } from '@luxfi/core/commerce'
6
+ import { observer } from 'mobx-react-lite'
7
+
8
+ const DrawerMargin: React.FC<{
9
+ clx?: string
10
+ }> = observer(({
11
+ clx=''
12
+ }) => {
13
+
14
+ const drawer = useCommerceDrawer()
15
+ return (
16
+ <div
17
+ className={cn('transition-height', clx)}
18
+ style={{
19
+ height: drawer.state === 'micro' ? drawer.microHeight : 0
20
+ }}
21
+ />
22
+ )
23
+ })
24
+
25
+ export default DrawerMargin
@@ -1,78 +1,78 @@
1
- import React from 'react'
2
-
3
- import type { LinkDef } from '@hanzo/ui/types'
4
- import { NavItems } from '@hanzo/ui/primitives'
5
- import { cn } from '@hanzo/ui/util'
6
-
7
- import Copyright from './copyright'
8
- import type { SiteDef } from '../site-def'
9
- import { legal } from '../site-def/footer/legal'
10
- import Logo from './logo'
11
-
12
- const Footer: React.FC<{
13
- siteDef: SiteDef,
14
- className?: string,
15
- noHorizPadding?: boolean
16
- }> = ({
17
- siteDef,
18
- className='',
19
- noHorizPadding=false
20
- }) => {
21
-
22
- const { footer, aboveCopyright } = siteDef
23
- const smGridCols = Math.floor(footer.length/2)
24
- const smGridColsClx = `sm:grid-cols-${smGridCols} `
25
- const _aboveCopyright = (typeof aboveCopyright === 'undefined') ? legal : aboveCopyright
26
-
27
- return (
28
- <footer className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}>
29
- <div className={
30
- (noHorizPadding ? '' : 'px-5 md:px-8 ') +
31
- 'grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 ' + smGridColsClx +
32
- 'md:w-full sm:justify-items-center md:mx-0 lg:w-full max-w-screen-2xl ' +
33
- 'md:flex md:flex-row md:justify-between '
34
- }>
35
- <div className='hidden lg:flex flex-col' key={0}>
36
- <Logo size='md' layout='text-only' />
37
- </div>
38
- {footer.map((defs: LinkDef[], index: number) => {
39
-
40
- const xsColSpanClx = ((index === footer.length - 1) && (footer.length % 2 === 1)) ?
41
- 'xs:col-span-2 xs:mx-auto md:col-span-1 md:mx-0 ' : ''
42
-
43
- return (
44
- <NavItems
45
- items={defs}
46
- currentAs={siteDef.currentAs}
47
- as='nav'
48
- className={cn('sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start ' +
49
- 'gap-[11px] sm:gap-[12px] md:gap-[15px] ',
50
- xsColSpanClx
51
- )}
52
- key={index + 1}
53
- itemClx={(def: LinkDef) => ((def.variant === 'linkFG') ?
54
- 'font-nav text-[15px]/[1.3] font-medium text-foreground tracking-normal'
55
- :
56
- 'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'
57
- )}
58
- />
59
- )
60
- })}
61
- </div>
62
- <div className='md:mt-[2vh]'>
63
- {_aboveCopyright.length > 0 && (
64
- <NavItems
65
- items={_aboveCopyright}
66
- as='div'
67
- className={'flex flex-row justify-center gap-4 mb-2'}
68
- itemClx={'text-sm text-center text-muted-2 underline hover:text-foreground'}
69
- />
70
- )}
71
- <Copyright className='text-sm text-center text-muted-3'/>
72
- </div>
73
- </footer>
74
- )
75
- }
76
-
77
- export default Footer
1
+ import React from 'react'
2
+
3
+ import type { LinkDef } from '@hanzo/ui/types'
4
+ import { NavItems } from '@hanzo/ui/primitives'
5
+ import { cn } from '@hanzo/ui/util'
6
+
7
+ import Copyright from './copyright'
8
+ import type { SiteDef } from '../site-def'
9
+ import { legal } from '../site-def/footer/legal'
10
+ import Logo from './logo'
11
+
12
+ const Footer: React.FC<{
13
+ siteDef: SiteDef,
14
+ className?: string,
15
+ noHorizPadding?: boolean
16
+ }> = ({
17
+ siteDef,
18
+ className='',
19
+ noHorizPadding=false
20
+ }) => {
21
+
22
+ const { footer, aboveCopyright } = siteDef
23
+ const smGridCols = Math.floor(footer.length/2)
24
+ const smGridColsClx = `sm:grid-cols-${smGridCols} `
25
+ const _aboveCopyright = (typeof aboveCopyright === 'undefined') ? legal : aboveCopyright
26
+
27
+ return (
28
+ <footer className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}>
29
+ <div className={
30
+ (noHorizPadding ? '' : 'px-5 md:px-8 ') +
31
+ 'grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 ' + smGridColsClx +
32
+ 'md:w-full sm:justify-items-center md:mx-0 lg:w-full max-w-screen-2xl ' +
33
+ 'md:flex md:flex-row md:justify-between '
34
+ }>
35
+ <div className='hidden lg:flex flex-col' key={0}>
36
+ <Logo size='md' variant='text-only' />
37
+ </div>
38
+ {footer.map((defs: LinkDef[], index: number) => {
39
+
40
+ const xsColSpanClx = ((index === footer.length - 1) && (footer.length % 2 === 1)) ?
41
+ 'xs:col-span-2 xs:mx-auto md:col-span-1 md:mx-0 ' : ''
42
+
43
+ return (
44
+ <NavItems
45
+ items={defs}
46
+ currentAs={siteDef.currentAs}
47
+ as='nav'
48
+ className={cn('sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start ' +
49
+ 'gap-[11px] sm:gap-[12px] md:gap-[15px] ',
50
+ xsColSpanClx
51
+ )}
52
+ key={index + 1}
53
+ itemClx={(def: LinkDef) => ((def.variant === 'linkFG') ?
54
+ 'font-nav text-[15px]/[1.3] font-medium text-foreground tracking-normal'
55
+ :
56
+ 'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'
57
+ )}
58
+ />
59
+ )
60
+ })}
61
+ </div>
62
+ <div className='md:mt-[2vh]'>
63
+ {_aboveCopyright.length > 0 && (
64
+ <NavItems
65
+ items={_aboveCopyright}
66
+ as='div'
67
+ className={'flex flex-row justify-center gap-4 mb-2'}
68
+ itemClx={'text-sm text-center text-muted-2 underline hover:text-foreground'}
69
+ />
70
+ )}
71
+ <Copyright className='text-sm text-center text-muted-3'/>
72
+ </div>
73
+ </footer>
74
+ )
75
+ }
76
+
77
+ export default Footer
78
78
  // flex flex-col justify-between gap-6