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.
59 lines
1.2 KiB
59 lines
1.2 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { SubscriptionType } from 'requests'
|
|
|
|
import { T9n } from 'features/T9n'
|
|
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
|
|
|
|
const List = styled.ul`
|
|
display: flex;
|
|
padding: 0 35px;
|
|
margin-top: 9px;
|
|
`
|
|
|
|
type ItemProps = {
|
|
active?: boolean,
|
|
}
|
|
|
|
const Item = styled.li.attrs(() => ({
|
|
tabIndex: 0,
|
|
}))<ItemProps>`
|
|
width: 50%;
|
|
font-size: 20px;
|
|
line-height: 42px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
cursor: pointer;
|
|
|
|
${({ active }) => (
|
|
active
|
|
? css`
|
|
border-bottom: 3px solid #fff;
|
|
color: #fff;
|
|
`
|
|
: ''
|
|
)}
|
|
`
|
|
|
|
export const PaymentPeriods = () => {
|
|
const { onPeriodSelect, selectedPeriod } = useBuyMatchPopupStore()
|
|
return (
|
|
<List>
|
|
<Item
|
|
active={selectedPeriod === SubscriptionType.Month}
|
|
onClick={() => onPeriodSelect(SubscriptionType.Month)}
|
|
>
|
|
<T9n t='for_month' />
|
|
</Item>
|
|
<Item
|
|
active={selectedPeriod === SubscriptionType.Year}
|
|
onClick={() => onPeriodSelect(SubscriptionType.Year)}
|
|
>
|
|
<T9n t='for_year' />
|
|
</Item>
|
|
</List>
|
|
)
|
|
}
|
|
|