import * as React from 'react' ; import type { BackgroundColorOptions } from '@twilio-paste/style-props' ; import { useTheme } from '@twilio-paste/theme' ; import { css } from '@twilio-paste/styling-library' ; import { useWindowSize } from '../hooks/useWindowSize' ; const getSkewOffset = ( width , skewAngle ) : number => Math . floor ( ( Math . tan ( skewAngle ) * width ) / 2 ) ; export const HOMEPAGE_SKEW_ANGLE = - 0.15708 ; export function useSlantedSkew ( angle = HOMEPAGE_SKEW_ANGLE ) { const { width = 1740 } = useWindowSize ( ) ; return [ getSkewOffset ( width , angle ) ] ; } interface BackgroundGradientProps { skewAngle ? : number ; gradientAngle ? : string ; startColor : BackgroundColorOptions ; endColor : BackgroundColorOptions ; styles ? : React . CSSProperties ; } export const SlantedBackgroundGradient = ( { startColor , endColor , skewAngle = HOMEPAGE_SKEW_ANGLE , gradientAngle = '90deg' , styles , ... props } ) => { const [ skewOffset ] = useSlantedSkew ( skewAngle ) ; const { backgroundColors } = useTheme ( ) ; return ( < div css = { css ( { '&:before' : { content : `" "` , zIndex : - 1 , position : 'absolute' , outline : '1px solid transparent' , right : 0 , bottom : 0 , left : 0 , top : `${ skewOffset }px` , transform : `skewY(${ skewAngle }rad)` , transition : 'top 400ms ease' , background : `linear-gradient(
            ${ gradientAngle },
            ${ backgroundColors [ startColor ] } 0%,
            ${ backgroundColors [ endColor ] } 100%
          )` , ... styles , } , } ) } { ... props } />); } ;