You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
spa_instat_tv/src/features/PreferencesPopup/index.tsx

61 lines
1.3 KiB

import {
HeaderActions,
CloseButton,
} from 'features/PopupComponents'
import { T9n } from 'features/T9n'
import { SportsList } from './components/SportList'
import { TournamentsBlock } from './components/TournamentsBlock'
import { usePreferencesStore } from './store'
import {
Modal,
Wrapper,
Header,
HeaderTitle,
Body,
Footer,
ApplyButton,
Loader,
} from './styled'
export * from './store'
export const PreferencesPopup = () => {
const {
closePopup,
isApplyButtonDisabled,
isFetching,
isOpen,
onApplyClick,
} = usePreferencesStore()
return (
<Modal
isOpen={isOpen}
close={closePopup}
withCloseButton={false}
>
{isFetching && <Loader />}
<Wrapper isFetching={isFetching}>
<Header>
<HeaderTitle>
<T9n t='my_preferences' />
</HeaderTitle>
<HeaderActions position='right'>
<CloseButton onClick={closePopup} />
</HeaderActions>
</Header>
<Body>
<SportsList />
<TournamentsBlock />
</Body>
<Footer>
<ApplyButton onClick={onApplyClick} disabled={isApplyButtonDisabled}>
<T9n t='apply' />
</ApplyButton>
</Footer>
</Wrapper>
</Modal>
)
}