import * as React from 'react'; import { Tooltip } from 'antd'; import { css } from '@emotion/react'; import useSiteToken from '../../../hooks/useSiteToken'; export interface LangBtnProps { label1: React.ReactNode; label2: React.ReactNode; tooltip1?: React.ReactNode; tooltip2?: React.ReactNode; value: 1 | 2; pure?: boolean; onClick?: React.MouseEventHandler; } const BASE_SIZE = '1.2em'; const useStyle = () => { const { token } = useSiteToken(); const { controlHeight, motionDurationMid } = token; return { btn: css` color: ${token.colorText}; border-color: ${token.colorBorder}; padding: 0 !important; width: ${controlHeight}px; height: ${controlHeight}px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: ${token.borderRadius}px; transition: all ${motionDurationMid}; cursor: pointer; .btn-inner { transition: all ${motionDurationMid}; } &:hover { background: ${token.colorBgTextHover}; .btn-inner { transform: scale(1.1); } } img { width: ${BASE_SIZE}; height: ${BASE_SIZE}; } .anticon { font-size: ${BASE_SIZE}; } `, }; }; export default function LangBtn({ label1, label2, tooltip1, tooltip2, value, pure, onClick, }: LangBtnProps) { const { token } = useSiteToken(); const style = useStyle(); let label1Style: React.CSSProperties; let label2Style: React.CSSProperties; const iconStyle: React.CSSProperties = { position: 'absolute', fontSize: BASE_SIZE, lineHeight: 1, border: `1px solid ${token.colorText}`, color: token.colorText, }; const fontStyle: React.CSSProperties = { left: '-5%', top: 0, zIndex: 1, background: token.colorText, color: token.colorTextLightSolid, transformOrigin: '0 0', transform: `scale(0.7)`, }; const backStyle: React.CSSProperties = { right: '-5%', bottom: 0, zIndex: 0, transformOrigin: '100% 100%', transform: `scale(0.5)`, }; if (value === 1) { label1Style = fontStyle; label2Style = backStyle; } else { label1Style = backStyle; label2Style = fontStyle; } let node = ( ); if (tooltip1 || tooltip2) { node = {node}; } return node; }