复写 Checkbox 的样式

import Button from '@pk/components/Button'
import styled from 'styled-components'
import css from 'styled-jsx/css'

const containerWidth = 436

export const Container = styled.div`
  box-sizing: border-box;
  width: ${containerWidth}px;
  position: relative;
`

export const Title = styled.div`
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 12px;
`

export const Content = styled.div`
  display: flex;
  justify-content: center;
`
export const CheckboxPanel = styled.div`
  min-width: 64px;
`

export const CheckboxGroup = styled.label`
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 保持左对齐 */
  margin-bottom: 12px;
  gap: 8px;
  color: #fff;
`

export const Checkbox = styled.input`
  appearance: none;
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #acc0ba; /* 设置边框颜色和宽度 */
  border-radius: 2px; /* 设置边框圆角 */
  outline: none; /* 移除默认的外观 */

  &:checked {
    background-color: #20f883; /* 选中状态下的背景色 */
    border: 1px solid #20f883;
  }

  &:checked::before {
    content: '';
    position: absolute;
    top: 44%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    width: 4px;
    height: 8px;
    padding: -2px;
    border: 2.5px solid #0b170f;
    border-top: none;
    border-left: none;
  }
`

export const BottomBox = styled.div`
  margin-top: 20px;
  display: grid;

  @media screen and (max-width: 750px) {
    margin-top: 64px;
  }
`

export const StyledButton = styled(Button)`
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
`


import React, { useState } from 'react'
import { observer } from 'mobx-react-lite'
import * as Styled from './style'
import { useTranslation } from 'next-i18next'
import { useStore } from '@pk/store'

enum CheckboxLabelEnum {
  Beginner = 'Beginner',
  Intermediate = 'Intermediate',
  Advanced = 'Advanced',
}

const Index: React.FC = () => {
  const { t } = useTranslation('pk')
  const { setPopup } = useStore()

  const levels = Object.values(CheckboxLabelEnum)
  const [selectedLevel, setSelectedLevel] = useState<CheckboxLabelEnum>(CheckboxLabelEnum.Beginner)

  const handleCheckboxChange = (level: CheckboxLabelEnum) => {
    setSelectedLevel(level === selectedLevel ? CheckboxLabelEnum.Beginner : level)
  }

  const toConfirm = () => {
    // TODO
  }

  return (
    <Styled.Container>
      <Styled.Title>{t('PK.SelectLevel')}</Styled.Title>
      <Styled.Content>
        <Styled.CheckboxPanel>
          {levels.map(level => (
            <Styled.CheckboxGroup key={level}>
              <Styled.Checkbox
                type="checkbox"
                checked={level === selectedLevel}
                onChange={() => handleCheckboxChange(level)}
              />
              {t(`PK.${level}`)}
            </Styled.CheckboxGroup>
          ))}
        </Styled.CheckboxPanel>
      </Styled.Content>
      <Styled.BottomBox>
        <Styled.StyledButton size="middle" onClick={toConfirm}>
          {t('PK.Confirm')}
        </Styled.StyledButton>
      </Styled.BottomBox>
    </Styled.Container>
  )
}

export default observer(Index)