()
| 14 | } |
| 15 | |
| 16 | render() { |
| 17 | return ( |
| 18 | <div class="w-[60px] h-8 bg-zinc-300 dark:bg-zinc-400 rounded-[2px] relative"> |
| 19 | <div |
| 20 | class={classNames('absolute z-0 w-[28px] h-[28px] top-[2px] rounded-[2px] transition-all duration-300', { |
| 21 | 'left-[2px] bg-white': !isDark.value, |
| 22 | 'left-[30px] bg-zinc-500': isDark.value, |
| 23 | })} |
| 24 | ></div> |
| 25 | |
| 26 | <div |
| 27 | class={classNames('absolute transition-all duration-300 w-[30px] h-[30px] px-1.5 py-[7px]', { |
| 28 | 'text-[#ffbd2e]': !isDark.value, |
| 29 | 'text-zinc-700 cursor-pointer': isDark.value, |
| 30 | })} |
| 31 | onClick={this.onLightClick} |
| 32 | > |
| 33 | <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 34 | <path |
| 35 | fill="currentColor" |
| 36 | d="M9.99996 3.15217C10.5252 3.15217 10.951 2.72636 10.951 2.20109C10.951 1.67582 10.5252 1.25 9.99996 1.25C9.47469 1.25 9.04887 1.67582 9.04887 2.20109C9.04887 2.72636 9.47469 3.15217 9.99996 3.15217Z" |
| 37 | ></path> |
| 38 | <path |
| 39 | fill="currentColor" |
| 40 | d="M9.99992 4.29348C6.84829 4.29348 4.2934 6.84838 4.2934 10C4.2934 13.1516 6.84829 15.7065 9.99992 15.7065C13.1515 15.7065 15.7064 13.1516 15.7064 10C15.7064 6.84838 13.1515 4.29348 9.99992 4.29348Z" |
| 41 | ></path> |
| 42 | <path |
| 43 | fill="currentColor" |
| 44 | d="M16.4673 4.4837C16.4673 5.00896 16.0415 5.43478 15.5162 5.43478C14.991 5.43478 14.5652 5.00896 14.5652 4.4837C14.5652 3.95843 14.991 3.53261 15.5162 3.53261C16.0415 3.53261 16.4673 3.95843 16.4673 4.4837Z" |
| 45 | ></path> |
| 46 | <path |
| 47 | fill="currentColor" |
| 48 | d="M17.7989 10.9511C18.3241 10.9511 18.75 10.5253 18.75 10C18.75 9.47474 18.3241 9.04891 17.7989 9.04891C17.2736 9.04891 16.8478 9.47474 16.8478 10C16.8478 10.5253 17.2736 10.9511 17.7989 10.9511Z" |
| 49 | ></path> |
| 50 | <path |
| 51 | fill="currentColor" |
| 52 | d="M16.4673 15.5163C16.4673 16.0416 16.0415 16.4674 15.5162 16.4674C14.991 16.4674 14.5652 16.0416 14.5652 15.5163C14.5652 14.991 14.991 14.5652 15.5162 14.5652C16.0415 14.5652 16.4673 14.991 16.4673 15.5163Z" |
| 53 | ></path> |
| 54 | <path |
| 55 | fill="currentColor" |
| 56 | d="M9.99996 18.75C10.5252 18.75 10.951 18.3242 10.951 17.7989C10.951 17.2736 10.5252 16.8478 9.99996 16.8478C9.47469 16.8478 9.04887 17.2736 9.04887 17.7989C9.04887 18.3242 9.47469 18.75 9.99996 18.75Z" |
| 57 | ></path> |
| 58 | <path |
| 59 | fill="currentColor" |
| 60 | d="M5.43469 15.5163C5.43469 16.0416 5.00887 16.4674 4.4836 16.4674C3.95833 16.4674 3.53252 16.0416 3.53252 15.5163C3.53252 14.991 3.95833 14.5652 4.4836 14.5652C5.00887 14.5652 5.43469 14.991 5.43469 15.5163Z" |
| 61 | ></path> |
| 62 | <path |
| 63 | fill="currentColor" |
| 64 | d="M2.20096 10.9511C2.72623 10.9511 3.15205 10.5253 3.15205 10C3.15205 9.47474 2.72623 9.04891 2.20096 9.04891C1.67569 9.04891 1.24988 9.47474 1.24988 10C1.24988 10.5253 1.67569 10.9511 2.20096 10.9511Z" |
| 65 | ></path> |
| 66 | <path |
| 67 | fill="currentColor" |
| 68 | d="M5.43469 4.4837C5.43469 5.00896 5.00887 5.43478 4.4836 5.43478C3.95833 5.43478 3.53252 5.00896 3.53252 4.4837C3.53252 3.95843 3.95833 3.53261 4.4836 3.53261C5.00887 3.53261 5.43469 3.95843 5.43469 4.4837Z" |
| 69 | ></path> |
| 70 | </svg> |
| 71 | </div> |
| 72 | <div |
| 73 | class={classNames('absolute transition-all duration-300 w-[30px] h-[30px] right-0 px-1.5 py-[7px]', { |
nothing calls this directly
no test coverage detected