useScroll.tsimport React, { useLayoutEffect, useState} from 'react';
export const useScroll = ( ref ) => {
const [ scroll, setScroll ] = useState(false);
const updateScroll = () => {
If (!ref.current) return
let isScroll = false
const heightTop: number = window.scrollY
if(ref.current.offsetHeight < heightTop)
isScroll = true
if(heightHeaderRef.current.offsetHeight > heightTop)
isScroll = false
setScroll(isScroll)
}
useLayoutEffect( () => {
window.addEventListener('scroll',updateScroll)
updateScroll();
return () => {
window.removeEventListener('scroll',updateScroll)
}
}, [] );
return scroll;
}const Header = () => {
const heightHeaderRef = useRef<HTMLDivElement | null>(null)
const scroll = useScroll<boolean>(heightHeaderRef)
console.log(scroll)
return (
<header className={`${background} sticky top-0 left-0`} ref={heightHeaderRef}>
<div className={`${container} ${scroll ? 'py-2' : 'py-6'} duration-300`}>
<div className={'flex justify-between items-center'}>
<div className={'flex'}>
<NavLink to={''} className={'text-xl text-white mr-6'}>ГЛАВНАЯ</NavLink>
<NavLink to={'/about'} className={'text-xl text-white mr-6'}>О НАС</NavLink>
<NavLink to={'/crm'} className={'text-xl text-white mr-6'}>CRM</NavLink>
<NavLink to={'/licenses'} className={'text-xl text-white mr-6'}>ЛИЦЕНЗИИ</NavLink>
<NavLink to={'/blog'} className={'text-xl text-white mr-6'}>БЛОГ</NavLink>
<NavLink to={'/faq'} className={'text-xl text-white'}>FAQ</NavLink>
</div>
<div>
<a className={'text-white text-center block text-2xl'} href="tel::+7(385) 299-20-21">+7(385) 299-20-21</a>
<div className={'text-white text-center block text-xs'}>ЗВОНОК ПО РОССИИ БЕСПЛАТНЫЙ</div>
</div>
</div>
</div>
</header>
)
}
export default Headerexport const newsReducer = (state = initialState, action:DataAction): DataState =>{
switch (action.type){
case DataActionTypes.FETCH_DATA_NEWS:
return {loading:true, error:null, data: []};
case DataActionTypes.FETCH_DATA_NEWS_SUCCESS:
return {loading:false, error:null, data: action.payload};
case DataActionTypes.FETCH_DATA_NEWS_ERROR:
return {loading:false, error:action.payload, data: []};
default:
return state
}
}
export const newReducer = (state = initialStateNew, action:DataActionNew): DataStateNew =>{
switch (action.type){
case DataActionTypes.FETCH_DATA_NEW:
return {loading:true, error:null, data: []};
case DataActionTypes.FETCH_DATA_NEW_SUCCESS:
return {loading:false, error:null, data: action.payload};
case DataActionTypes.FETCH_DATA_NEW_ERROR:
return {loading:false, error:action.payload, data: []};
default:
return state
}
}removeThisComponent={removeComponent}Encountered two children with the same key, `null`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.