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.
49 lines
992 B
49 lines
992 B
import React from 'react'
|
|
|
|
import styled from 'styled-components/macro'
|
|
|
|
import { Tooltip, TooltipWrapper } from 'features/Tooltip'
|
|
import { useMatchSwitchesStore } from 'features/MatchSwitches'
|
|
|
|
import {
|
|
Switch,
|
|
Icon,
|
|
} from '../../styled'
|
|
|
|
const Wrapper = styled.div`
|
|
position: relative;
|
|
|
|
:hover ${TooltipWrapper} {
|
|
display: block;
|
|
}
|
|
`
|
|
|
|
export const AvailableMatchesSwitch = () => {
|
|
const {
|
|
availableMatchesOnly,
|
|
toggleMatchAvailablity,
|
|
} = useMatchSwitchesStore()
|
|
|
|
const lexic = availableMatchesOnly
|
|
? 'available_matches_shown'
|
|
: 'all_matches_shown'
|
|
|
|
return (
|
|
<Wrapper>
|
|
<Tooltip lexic={lexic}>
|
|
<Switch
|
|
role='switch'
|
|
aria-checked={availableMatchesOnly}
|
|
onClick={toggleMatchAvailablity}
|
|
>
|
|
<Icon
|
|
iconName='match-switch'
|
|
width={56}
|
|
height={48}
|
|
isOn={availableMatchesOnly}
|
|
/>
|
|
</Switch>
|
|
</Tooltip>
|
|
</Wrapper>
|
|
)
|
|
}
|
|
|