Toggle

1'use client'
2
3import React, { useState } from 'react'
4import styles from './toggle.module.css'
5import { useSound } from '@/hooks/use-sound'
6
7export function Toggle() {
8  const [isOn, setIsOn] = useState(false)
9
10  const toggle = () => setIsOn(p => !p)
11
12  const handleKeyDown = (e: React.KeyboardEvent) => {
13    if (e.key === ' ' || e.key === 'Enter') {
14      e.preventDefault()
15      toggle()
16    }
17  }
18
19  const playClick = useSound("/audio/ui-sounds/toggle.mp3");
20
21  return (
22    <button
23      role="switch"
24      aria-checked={isOn}
25      onClick={() => {
26        toggle();
27        playClick();
28      }}
29      onKeyDown={handleKeyDown}
30      className={`${styles.track} relative flex items-center w-[88px] h-[44px] rounded-full cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-neutral-400 select-none bg-[#e8e8e8] dark:bg-[#151518]`}
31    >
32      {/* Left dot — subtle, visible when ON */}
33      <span
34        className={`pointer-events-none absolute left-[11px] top-[19px] w-[6px] h-[6px] rounded-full bg-[#a8b8c4] dark:bg-[#607a8c] transition-opacity duration-300 ${isOn ? 'opacity-70' : 'opacity-0'}`}
35      />
36
37      {/* Right dot — orange, visible when OFF */}
38      <span
39        className={`pointer-events-none absolute right-[11px] top-[19px] w-[6px] h-[6px] rounded-full bg-[#f05a00] dark:bg-[#ff6820] transition-opacity duration-300 ${isOn ? 'opacity-0' : 'opacity-100'}`}
40      />
41
42      {/* Thumb — raised pintch button */}
43      <span
44        className={`${styles.thumb} pointer-events-none absolute top-[4px] left-[4px] w-[36px] h-[36px] rounded-full bg-[#f8f8f8] dark:bg-[#2a2a32] transition-transform duration-300 ease-in-out ${isOn ? 'translate-x-[44px]' : 'translate-x-0'}`}
45      />
46    </button>
47  )
48}
49
50export default Toggle