import * as React from 'react' ; import { Helmet } from 'react-helmet' ; import { Box } from '@twilio-paste/box' ; import { useTheme , generateTokensFromTheme } from '@twilio-paste/theme' ; import type { GenericTokensShape } from '@twilio-paste/design-tokens/types/GenericTokensShape' ; import { DesignerPreview } from './DesignerPreview' ; import { DesignerControls } from './DesignerControls' ; import { DesignerContext } from './DesignerContext' ; export const LandingPageDesigner = ( ) => { const theme = useTheme ( ) ; const initialTokens = generateTokensFromTheme ( theme ) ; const [ tokens , setTokens ] = React . useState < Partial < GenericTokensShape > > ( initialTokens ) ; React . useEffect ( ( ) => { setTokens ( generateTokensFromTheme ( theme ) ) ; } , [ theme ] ) ; const updateToken = React . useCallback ( ( bucket , key , value ) => { setTokens ( ( currentTokens ) => ( { ... currentTokens , [ key ] : value , [ bucket ] : { ... currentTokens [ bucket ] , [ key ] : value } , } ) ) ; } , [ ] ) ; return ( < Box borderColor = "colorBorderWeak" borderStyle = "solid" borderWidth = "borderWidth10" borderRadius = "borderRadius20" boxShadow = "shadowCard" display = "flex" > < Helmet > < link rel = "preconnect" href = "https://fonts.googleapis.com" / > < link rel = "preconnect" href = "https://fonts.gstatic.com" cross - origin / > < link href = "https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&family=Noto+Sans+Display:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap" rel = "stylesheet" / > < /Helmet> < DesignerContext . Provider value = { { tokens , updateToken } } > < DesignerPreview /> < DesignerControls / > < /DesignerContext.Provider> < /Box>); } ;