@luxfi/core 4.4.15 → 4.4.16
Sign up to get free protection for your applications and to get access to all the features.
- 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 +103 -100
- package/components/chat-widget.tsx +77 -77
- package/components/commerce/bag-button.tsx +67 -67
- package/components/commerce/checkout-panel/close-button.tsx +26 -26
- package/components/commerce/checkout-panel/dt-bag-carousel.tsx +36 -36
- package/components/commerce/checkout-panel/dt-checkout-panel.tsx +66 -66
- package/components/commerce/checkout-panel/index.tsx +123 -123
- package/components/commerce/checkout-panel/links-row.tsx +21 -21
- package/components/commerce/checkout-panel/mb-checkout-panel.tsx +55 -55
- package/components/commerce/checkout-panel/steps-indicator.tsx +39 -39
- package/components/commerce/checkout-panel/thank-you.tsx +18 -18
- package/components/commerce/desktop-bag-popup.tsx +78 -78
- package/components/commerce/mobile-bag-drawer.tsx +51 -51
- package/components/commerce/mobile-menu-toggle-button.tsx +35 -35
- package/components/commerce/mobile-nav-menu.tsx +64 -64
- package/components/contact-dialog/contact-form.tsx +112 -112
- package/components/contact-dialog/disclaimer.tsx +13 -13
- package/components/contact-dialog/index.tsx +64 -64
- package/components/copyright.tsx +21 -21
- package/components/footer.tsx +77 -77
- package/components/header/desktop.tsx +54 -54
- package/components/header/index.tsx +26 -26
- package/components/header/mobile.tsx +161 -161
- package/components/header/theme-toggle.tsx +26 -26
- package/components/icons/bag-icon.tsx +10 -10
- package/components/icons/github.tsx +14 -14
- package/components/icons/index.tsx +35 -35
- package/components/icons/lux-logo.tsx +10 -10
- package/components/icons/secure-delivery.tsx +13 -13
- package/components/icons/social-icon.tsx +35 -35
- package/components/icons/social-svg.css +3 -3
- package/components/icons/youtube-logo.tsx +59 -59
- package/components/index.ts +27 -27
- package/components/logo.tsx +81 -81
- 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 +27 -27
- package/components/not-found/not-found-content.mdx +5 -5
- package/components/root-layout.tsx +71 -71
- package/components/scripts.tsx +23 -23
- package/conf/index.ts +50 -50
- 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/determine-device-mw.ts +16 -16
- 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/package.json +73 -73
- 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.ts +35 -35
- package/site-def/site-def.ts +36 -36
- package/style/lux-colors.css +85 -85
- package/style/lux-global.css +30 -30
- 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 +10 -10
- package/types/contact-info.ts +10 -10
@@ -1,8 +1,8 @@
|
|
1
|
-
import MiniChart from './wrapper'
|
2
|
-
// import { type MiniChartProps, type MiniChartDateRanges } from './mini-chart-props'
|
3
|
-
|
4
|
-
export {
|
5
|
-
MiniChart as default,
|
6
|
-
// type MiniChartProps,
|
7
|
-
// type MiniChartDateRanges
|
1
|
+
import MiniChart from './wrapper'
|
2
|
+
// import { type MiniChartProps, type MiniChartDateRanges } from './mini-chart-props'
|
3
|
+
|
4
|
+
export {
|
5
|
+
MiniChart as default,
|
6
|
+
// type MiniChartProps,
|
7
|
+
// type MiniChartDateRanges
|
8
8
|
}
|
@@ -1,44 +1,44 @@
|
|
1
|
-
import type { CSSProperties } from 'react'
|
2
|
-
|
3
|
-
// https://www.typescriptlang.org/docs/handbook/enums.html#enums-at-runtime
|
4
|
-
const enum MiniChartDateRangesValues {
|
5
|
-
'1D',
|
6
|
-
'1M',
|
7
|
-
'3M',
|
8
|
-
'12M',
|
9
|
-
'60M',
|
10
|
-
'ALL',
|
11
|
-
}
|
12
|
-
|
13
|
-
type MiniChartDateRanges = keyof typeof MiniChartDateRangesValues
|
14
|
-
|
15
|
-
interface MiniChartBaseProps {
|
16
|
-
symbol: string
|
17
|
-
exchange?: string
|
18
|
-
dateRange: MiniChartDateRanges
|
19
|
-
noTimeScale?: boolean
|
20
|
-
width?: number | string
|
21
|
-
height?: number | string
|
22
|
-
locale?: string
|
23
|
-
colorTheme?: "light" | "dark"
|
24
|
-
// @ts-ignore // TODO
|
25
|
-
lineColor?: CSSProperties["color"]
|
26
|
-
// @ts-ignore // TODO
|
27
|
-
topGradientColor?: CSSProperties["color"]
|
28
|
-
// @ts-ignore // TODO
|
29
|
-
bottomGradientColor?: CSSProperties["color"]
|
30
|
-
isTransparent?: boolean
|
31
|
-
autosize?: boolean
|
32
|
-
chartOnly?: boolean
|
33
|
-
largeChartUrl?: string
|
34
|
-
}
|
35
|
-
|
36
|
-
type MiniChartProps = {
|
37
|
-
widgetProps: MiniChartBaseProps
|
38
|
-
containerStyles?: CSSProperties
|
39
|
-
}
|
40
|
-
|
41
|
-
export {
|
42
|
-
type MiniChartProps,
|
43
|
-
type MiniChartDateRanges
|
1
|
+
import type { CSSProperties } from 'react'
|
2
|
+
|
3
|
+
// https://www.typescriptlang.org/docs/handbook/enums.html#enums-at-runtime
|
4
|
+
const enum MiniChartDateRangesValues {
|
5
|
+
'1D',
|
6
|
+
'1M',
|
7
|
+
'3M',
|
8
|
+
'12M',
|
9
|
+
'60M',
|
10
|
+
'ALL',
|
11
|
+
}
|
12
|
+
|
13
|
+
type MiniChartDateRanges = keyof typeof MiniChartDateRangesValues
|
14
|
+
|
15
|
+
interface MiniChartBaseProps {
|
16
|
+
symbol: string
|
17
|
+
exchange?: string
|
18
|
+
dateRange: MiniChartDateRanges
|
19
|
+
noTimeScale?: boolean
|
20
|
+
width?: number | string
|
21
|
+
height?: number | string
|
22
|
+
locale?: string
|
23
|
+
colorTheme?: "light" | "dark"
|
24
|
+
// @ts-ignore // TODO
|
25
|
+
lineColor?: CSSProperties["color"]
|
26
|
+
// @ts-ignore // TODO
|
27
|
+
topGradientColor?: CSSProperties["color"]
|
28
|
+
// @ts-ignore // TODO
|
29
|
+
bottomGradientColor?: CSSProperties["color"]
|
30
|
+
isTransparent?: boolean
|
31
|
+
autosize?: boolean
|
32
|
+
chartOnly?: boolean
|
33
|
+
largeChartUrl?: string
|
34
|
+
}
|
35
|
+
|
36
|
+
type MiniChartProps = {
|
37
|
+
widgetProps: MiniChartBaseProps
|
38
|
+
containerStyles?: CSSProperties
|
39
|
+
}
|
40
|
+
|
41
|
+
export {
|
42
|
+
type MiniChartProps,
|
43
|
+
type MiniChartDateRanges
|
44
44
|
}
|
@@ -1,85 +1,85 @@
|
|
1
|
-
'use client'
|
2
|
-
|
3
|
-
import React, { useEffect, useRef } from 'react'
|
4
|
-
import { type MiniChartProps } from './mini-chart-props'
|
5
|
-
|
6
|
-
const MiniChart: React.FC<MiniChartProps> = ({
|
7
|
-
widgetProps,
|
8
|
-
containerStyles = {}
|
9
|
-
}) => {
|
10
|
-
|
11
|
-
const {
|
12
|
-
symbol,
|
13
|
-
exchange,
|
14
|
-
lineColor,
|
15
|
-
topGradientColor,
|
16
|
-
bottomGradientColor,
|
17
|
-
width,
|
18
|
-
height,
|
19
|
-
autosize,
|
20
|
-
locale,
|
21
|
-
...rest
|
22
|
-
} = widgetProps
|
23
|
-
|
24
|
-
const symbolString = (exchange) ? `${exchange}:${symbol}` : symbol
|
25
|
-
|
26
|
-
const containerRef = useRef<HTMLDivElement | null>(null)
|
27
|
-
|
28
|
-
useEffect(() => {
|
29
|
-
if (!containerRef.current) {
|
30
|
-
return
|
31
|
-
}
|
32
|
-
const script = document.createElement('script')
|
33
|
-
script.type = 'text/javascript'
|
34
|
-
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js'
|
35
|
-
script.async = true
|
36
|
-
script.onload = async () => {
|
37
|
-
const iframe = containerRef.current?.querySelector('iframe')
|
38
|
-
if (iframe && iframe instanceof Element) {
|
39
|
-
iframe.style.colorScheme = 'normal'
|
40
|
-
setTimeout(() => {
|
41
|
-
const value = document.querySelector('#mini-symbol-overview-ticker')
|
42
|
-
console.log("TICKER: " + value)
|
43
|
-
}, 1200) // from experimentation
|
44
|
-
|
45
|
-
|
46
|
-
}
|
47
|
-
|
48
|
-
const copyDiv = document.querySelector('.tradingview-widget-copyright')
|
49
|
-
if (copyDiv) {
|
50
|
-
console.log("COPY: " + copyDiv)
|
51
|
-
setTimeout(() => {
|
52
|
-
copyDiv.classList.remove('invisible')
|
53
|
-
}, 1200) // from experimentation
|
54
|
-
}
|
55
|
-
}
|
56
|
-
const config = JSON.stringify({
|
57
|
-
symbol: symbolString,
|
58
|
-
width: autosize ? '100%' : (width || 350),
|
59
|
-
height: autosize ? '100%' : (height || 220),
|
60
|
-
locale: locale ?? 'en',
|
61
|
-
isTransparent: 'true',
|
62
|
-
trendLineColor: lineColor || 'rgba(41, 98, 255, 1)',
|
63
|
-
underLineColor: topGradientColor || 'rgba(41, 98, 255, 0.3)',
|
64
|
-
underLineBottomColor: bottomGradientColor || 'rgba(41, 98, 255, 0)',
|
65
|
-
...rest,
|
66
|
-
})
|
67
|
-
script.innerHTML = config
|
68
|
-
containerRef.current.appendChild(script)
|
69
|
-
return () => {
|
70
|
-
while (containerRef.current?.firstChild) {
|
71
|
-
containerRef.current.removeChild(containerRef.current.firstChild)
|
72
|
-
}
|
73
|
-
}
|
74
|
-
}, [ JSON.stringify(widgetProps) ])
|
75
|
-
|
76
|
-
return (<>
|
77
|
-
<div style={containerStyles} className='tradingview-widget-container h-[150px]' ref={containerRef} />
|
78
|
-
<div className='tradingview-widget-copyright border-t w-full invisible'>
|
79
|
-
<a href={`https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : '' }`} rel="noopener" target="_blank">
|
80
|
-
<span className="text-[--hz-ui-primary]">{symbol} quotes</span></a> by TradingView
|
81
|
-
</div>
|
82
|
-
</>)
|
83
|
-
}
|
84
|
-
|
85
|
-
export default MiniChart
|
1
|
+
'use client'
|
2
|
+
|
3
|
+
import React, { useEffect, useRef } from 'react'
|
4
|
+
import { type MiniChartProps } from './mini-chart-props'
|
5
|
+
|
6
|
+
const MiniChart: React.FC<MiniChartProps> = ({
|
7
|
+
widgetProps,
|
8
|
+
containerStyles = {}
|
9
|
+
}) => {
|
10
|
+
|
11
|
+
const {
|
12
|
+
symbol,
|
13
|
+
exchange,
|
14
|
+
lineColor,
|
15
|
+
topGradientColor,
|
16
|
+
bottomGradientColor,
|
17
|
+
width,
|
18
|
+
height,
|
19
|
+
autosize,
|
20
|
+
locale,
|
21
|
+
...rest
|
22
|
+
} = widgetProps
|
23
|
+
|
24
|
+
const symbolString = (exchange) ? `${exchange}:${symbol}` : symbol
|
25
|
+
|
26
|
+
const containerRef = useRef<HTMLDivElement | null>(null)
|
27
|
+
|
28
|
+
useEffect(() => {
|
29
|
+
if (!containerRef.current) {
|
30
|
+
return
|
31
|
+
}
|
32
|
+
const script = document.createElement('script')
|
33
|
+
script.type = 'text/javascript'
|
34
|
+
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js'
|
35
|
+
script.async = true
|
36
|
+
script.onload = async () => {
|
37
|
+
const iframe = containerRef.current?.querySelector('iframe')
|
38
|
+
if (iframe && iframe instanceof Element) {
|
39
|
+
iframe.style.colorScheme = 'normal'
|
40
|
+
setTimeout(() => {
|
41
|
+
const value = document.querySelector('#mini-symbol-overview-ticker')
|
42
|
+
console.log("TICKER: " + value)
|
43
|
+
}, 1200) // from experimentation
|
44
|
+
|
45
|
+
|
46
|
+
}
|
47
|
+
|
48
|
+
const copyDiv = document.querySelector('.tradingview-widget-copyright')
|
49
|
+
if (copyDiv) {
|
50
|
+
console.log("COPY: " + copyDiv)
|
51
|
+
setTimeout(() => {
|
52
|
+
copyDiv.classList.remove('invisible')
|
53
|
+
}, 1200) // from experimentation
|
54
|
+
}
|
55
|
+
}
|
56
|
+
const config = JSON.stringify({
|
57
|
+
symbol: symbolString,
|
58
|
+
width: autosize ? '100%' : (width || 350),
|
59
|
+
height: autosize ? '100%' : (height || 220),
|
60
|
+
locale: locale ?? 'en',
|
61
|
+
isTransparent: 'true',
|
62
|
+
trendLineColor: lineColor || 'rgba(41, 98, 255, 1)',
|
63
|
+
underLineColor: topGradientColor || 'rgba(41, 98, 255, 0.3)',
|
64
|
+
underLineBottomColor: bottomGradientColor || 'rgba(41, 98, 255, 0)',
|
65
|
+
...rest,
|
66
|
+
})
|
67
|
+
script.innerHTML = config
|
68
|
+
containerRef.current.appendChild(script)
|
69
|
+
return () => {
|
70
|
+
while (containerRef.current?.firstChild) {
|
71
|
+
containerRef.current.removeChild(containerRef.current.firstChild)
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}, [ JSON.stringify(widgetProps) ])
|
75
|
+
|
76
|
+
return (<>
|
77
|
+
<div style={containerStyles} className='tradingview-widget-container h-[150px]' ref={containerRef} />
|
78
|
+
<div className='tradingview-widget-copyright border-t w-full invisible'>
|
79
|
+
<a href={`https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : '' }`} rel="noopener" target="_blank">
|
80
|
+
<span className="text-[--hz-ui-primary]">{symbol} quotes</span></a> by TradingView
|
81
|
+
</div>
|
82
|
+
</>)
|
83
|
+
}
|
84
|
+
|
85
|
+
export default MiniChart
|
@@ -1,23 +1,23 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import BaseChart from './mini-chart'
|
4
|
-
|
5
|
-
const Wrapper: React.FC<{
|
6
|
-
symbol: string,
|
7
|
-
exchange?: string
|
8
|
-
}> = ({
|
9
|
-
symbol,
|
10
|
-
exchange
|
11
|
-
}) => (
|
12
|
-
<BaseChart widgetProps ={{
|
13
|
-
symbol,
|
14
|
-
exchange,
|
15
|
-
autosize: true,
|
16
|
-
colorTheme: 'dark',
|
17
|
-
lineColor: "rgb(114, 27, 228)",
|
18
|
-
bottomGradientColor: "rgba(255, 255, 255, 0.1)",
|
19
|
-
dateRange: '60M',
|
20
|
-
}}/>
|
21
|
-
)
|
22
|
-
|
23
|
-
export default Wrapper
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import BaseChart from './mini-chart'
|
4
|
+
|
5
|
+
const Wrapper: React.FC<{
|
6
|
+
symbol: string,
|
7
|
+
exchange?: string
|
8
|
+
}> = ({
|
9
|
+
symbol,
|
10
|
+
exchange
|
11
|
+
}) => (
|
12
|
+
<BaseChart widgetProps ={{
|
13
|
+
symbol,
|
14
|
+
exchange,
|
15
|
+
autosize: true,
|
16
|
+
colorTheme: 'dark',
|
17
|
+
lineColor: "rgb(114, 27, 228)",
|
18
|
+
bottomGradientColor: "rgba(255, 255, 255, 0.1)",
|
19
|
+
dateRange: '60M',
|
20
|
+
}}/>
|
21
|
+
)
|
22
|
+
|
23
|
+
export default Wrapper
|
@@ -1,27 +1,27 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import { ApplyTypography, Main } from '@hanzo/ui/primitives'
|
4
|
-
|
5
|
-
import type { SiteDef } from '../../site-def'
|
6
|
-
import Footer from '../footer'
|
7
|
-
import Header from '../header'
|
8
|
-
|
9
|
-
import NotFoundMDX from './not-found-content.mdx'
|
10
|
-
|
11
|
-
const NotFound: React.FC<{
|
12
|
-
header?: boolean
|
13
|
-
siteDef: SiteDef
|
14
|
-
}> = ({
|
15
|
-
header=false,
|
16
|
-
siteDef
|
17
|
-
}) => (<>
|
18
|
-
{header && <Header siteDef={siteDef}/>}
|
19
|
-
<Main className='xs:h-[100svh] xs:px-8 sm:px-10 sm:h-[700px]'>
|
20
|
-
<ApplyTypography className='mt-[200px] flex flex-col md:gap-8 '>
|
21
|
-
<NotFoundMDX />
|
22
|
-
</ApplyTypography>
|
23
|
-
</Main>
|
24
|
-
<Footer siteDef={siteDef}/>
|
25
|
-
</>)
|
26
|
-
|
27
|
-
export default NotFound
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import { ApplyTypography, Main } from '@hanzo/ui/primitives'
|
4
|
+
|
5
|
+
import type { SiteDef } from '../../site-def'
|
6
|
+
import Footer from '../footer'
|
7
|
+
import Header from '../header'
|
8
|
+
|
9
|
+
import NotFoundMDX from './not-found-content.mdx'
|
10
|
+
|
11
|
+
const NotFound: React.FC<{
|
12
|
+
header?: boolean
|
13
|
+
siteDef: SiteDef
|
14
|
+
}> = ({
|
15
|
+
header=false,
|
16
|
+
siteDef
|
17
|
+
}) => (<>
|
18
|
+
{header && <Header siteDef={siteDef}/>}
|
19
|
+
<Main className='xs:h-[100svh] xs:px-8 sm:px-10 sm:h-[700px]'>
|
20
|
+
<ApplyTypography className='mt-[200px] flex flex-col md:gap-8 '>
|
21
|
+
<NotFoundMDX />
|
22
|
+
</ApplyTypography>
|
23
|
+
</Main>
|
24
|
+
<Footer siteDef={siteDef}/>
|
25
|
+
</>)
|
26
|
+
|
27
|
+
export default NotFound
|
@@ -1,5 +1,5 @@
|
|
1
|
-
### ...Huh?
|
2
|
-
#### Sorry, we're fresh out of those.
|
3
|
-
<br/>
|
4
|
-
#### ...try something from the [Home Page](/)?
|
5
|
-
|
1
|
+
### ...Huh?
|
2
|
+
#### Sorry, we're fresh out of those.
|
3
|
+
<br/>
|
4
|
+
#### ...try something from the [Home Page](/)?
|
5
|
+
|
@@ -1,71 +1,71 @@
|
|
1
|
-
import React, { type PropsWithChildren } from 'react'
|
2
|
-
|
3
|
-
import type { Viewport } from 'next'
|
4
|
-
|
5
|
-
import { Toaster } from '@hanzo/ui/primitives'
|
6
|
-
|
7
|
-
import Header from './header'
|
8
|
-
import type SiteDef from '../site-def/site-def'
|
9
|
-
import getAppRouterBodyFontClasses from '../next/font/get-app-router-font-classes'
|
10
|
-
import { FacebookPixelHead } from '../next/analytics/pixel-analytics'
|
11
|
-
import Scripts from './scripts'
|
12
|
-
|
13
|
-
// Next 14: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export
|
14
|
-
const viewport = {
|
15
|
-
themeColor: [
|
16
|
-
{ media: '(prefers-color-scheme: light)', color: 'white' },
|
17
|
-
{ media: '(prefers-color-scheme: dark)', color: 'black' },
|
18
|
-
],
|
19
|
-
} satisfies Viewport
|
20
|
-
|
21
|
-
/*
|
22
|
-
These '.variable' fields are actually autogenerate css classnames that *define* the actual
|
23
|
-
css variables ('--<ugly-name>') that one asks for in the tailwind classes.
|
24
|
-
They are what make them available in the global scope. So this MUST
|
25
|
-
be done like this for the tailwind font classes to work.
|
26
|
-
|
27
|
-
(...not to be confused with the css var itself. This field should be named something else!)
|
28
|
-
*/
|
29
|
-
|
30
|
-
/*
|
31
|
-
re body: overflow-y-hidden overflow-x-hidden, h-full
|
32
|
-
We cannot have these on body tag for scroll-snap to work on iOS!
|
33
|
-
*/
|
34
|
-
const bodyClasses =
|
35
|
-
'bg-background text-foreground flex flex-col min-h-full' +
|
36
|
-
getAppRouterBodyFontClasses()
|
37
|
-
|
38
|
-
const RootLayout: React.FC<PropsWithChildren & {
|
39
|
-
siteDef: SiteDef
|
40
|
-
header?: boolean
|
41
|
-
}> = ({
|
42
|
-
header = true,
|
43
|
-
siteDef,
|
44
|
-
children,
|
45
|
-
}) => (
|
46
|
-
<html lang='en' suppressHydrationWarning className='hanzo-ui-dark-theme' style={{backgroundColor: '#000'}}>
|
47
|
-
<head >
|
48
|
-
{/* https://stackoverflow.com/a/75716588/11645689 */ }
|
49
|
-
<base target='_blank' />
|
50
|
-
<FacebookPixelHead/>
|
51
|
-
</head>
|
52
|
-
<body className={bodyClasses} style={{
|
53
|
-
// Not sure why these got added (by my check in)
|
54
|
-
// overflow: hidden here breaks scroll snap, see comment above
|
55
|
-
//paddingRight: '0 !important',
|
56
|
-
//maxWidth: '100vw',
|
57
|
-
display: 'none', // see scripts.tsx
|
58
|
-
|
59
|
-
}}>
|
60
|
-
<Scripts/>
|
61
|
-
{header && <Header siteDef={siteDef}/>}
|
62
|
-
{children}
|
63
|
-
<Toaster position='top-center' duration={3000}/>
|
64
|
-
</body>
|
65
|
-
</html>
|
66
|
-
)
|
67
|
-
|
68
|
-
export {
|
69
|
-
RootLayout as default,
|
70
|
-
viewport
|
71
|
-
}
|
1
|
+
import React, { type PropsWithChildren } from 'react'
|
2
|
+
|
3
|
+
import type { Viewport } from 'next'
|
4
|
+
|
5
|
+
import { Toaster } from '@hanzo/ui/primitives'
|
6
|
+
|
7
|
+
import Header from './header'
|
8
|
+
import type SiteDef from '../site-def/site-def'
|
9
|
+
import getAppRouterBodyFontClasses from '../next/font/get-app-router-font-classes'
|
10
|
+
import { FacebookPixelHead } from '../next/analytics/pixel-analytics'
|
11
|
+
import Scripts from './scripts'
|
12
|
+
|
13
|
+
// Next 14: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export
|
14
|
+
const viewport = {
|
15
|
+
themeColor: [
|
16
|
+
{ media: '(prefers-color-scheme: light)', color: 'white' },
|
17
|
+
{ media: '(prefers-color-scheme: dark)', color: 'black' },
|
18
|
+
],
|
19
|
+
} satisfies Viewport
|
20
|
+
|
21
|
+
/*
|
22
|
+
These '.variable' fields are actually autogenerate css classnames that *define* the actual
|
23
|
+
css variables ('--<ugly-name>') that one asks for in the tailwind classes.
|
24
|
+
They are what make them available in the global scope. So this MUST
|
25
|
+
be done like this for the tailwind font classes to work.
|
26
|
+
|
27
|
+
(...not to be confused with the css var itself. This field should be named something else!)
|
28
|
+
*/
|
29
|
+
|
30
|
+
/*
|
31
|
+
re body: overflow-y-hidden overflow-x-hidden, h-full
|
32
|
+
We cannot have these on body tag for scroll-snap to work on iOS!
|
33
|
+
*/
|
34
|
+
const bodyClasses =
|
35
|
+
'bg-background text-foreground flex flex-col min-h-full' +
|
36
|
+
getAppRouterBodyFontClasses()
|
37
|
+
|
38
|
+
const RootLayout: React.FC<PropsWithChildren & {
|
39
|
+
siteDef: SiteDef
|
40
|
+
header?: boolean
|
41
|
+
}> = ({
|
42
|
+
header = true,
|
43
|
+
siteDef,
|
44
|
+
children,
|
45
|
+
}) => (
|
46
|
+
<html lang='en' suppressHydrationWarning className='hanzo-ui-dark-theme' style={{backgroundColor: '#000'}}>
|
47
|
+
<head >
|
48
|
+
{/* https://stackoverflow.com/a/75716588/11645689 */ }
|
49
|
+
<base target='_blank' />
|
50
|
+
<FacebookPixelHead/>
|
51
|
+
</head>
|
52
|
+
<body className={bodyClasses} style={{
|
53
|
+
// Not sure why these got added (by my check in)
|
54
|
+
// overflow: hidden here breaks scroll snap, see comment above
|
55
|
+
//paddingRight: '0 !important',
|
56
|
+
//maxWidth: '100vw',
|
57
|
+
display: 'none', // see scripts.tsx
|
58
|
+
|
59
|
+
}}>
|
60
|
+
<Scripts/>
|
61
|
+
{header && <Header siteDef={siteDef}/>}
|
62
|
+
{children}
|
63
|
+
<Toaster position='top-center' duration={3000}/>
|
64
|
+
</body>
|
65
|
+
</html>
|
66
|
+
)
|
67
|
+
|
68
|
+
export {
|
69
|
+
RootLayout as default,
|
70
|
+
viewport
|
71
|
+
}
|
package/components/scripts.tsx
CHANGED
@@ -1,23 +1,23 @@
|
|
1
|
-
'use client'
|
2
|
-
|
3
|
-
import { useEffect } from 'react'
|
4
|
-
import { GoogleAnalytics } from '@next/third-parties/google'
|
5
|
-
import { FacebookPixel } from '../next/analytics'
|
6
|
-
|
7
|
-
const Scripts = () => {
|
8
|
-
|
9
|
-
useEffect(() => {
|
10
|
-
document.body.style.display = 'block'
|
11
|
-
}, [])
|
12
|
-
|
13
|
-
return (
|
14
|
-
<>
|
15
|
-
<FacebookPixel />
|
16
|
-
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
|
17
|
-
</>
|
18
|
-
)
|
19
|
-
}
|
20
|
-
|
21
|
-
export {
|
22
|
-
Scripts as default
|
23
|
-
}
|
1
|
+
'use client'
|
2
|
+
|
3
|
+
import { useEffect } from 'react'
|
4
|
+
import { GoogleAnalytics } from '@next/third-parties/google'
|
5
|
+
import { FacebookPixel } from '../next/analytics'
|
6
|
+
|
7
|
+
const Scripts = () => {
|
8
|
+
|
9
|
+
useEffect(() => {
|
10
|
+
document.body.style.display = 'block'
|
11
|
+
}, [])
|
12
|
+
|
13
|
+
return (
|
14
|
+
<>
|
15
|
+
<FacebookPixel />
|
16
|
+
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
|
17
|
+
</>
|
18
|
+
)
|
19
|
+
}
|
20
|
+
|
21
|
+
export {
|
22
|
+
Scripts as default
|
23
|
+
}
|