Pintch Switch

1'use client'
2
3import { useSound } from '@/hooks/use-sound'
4import React, { useState } from 'react'
5
6export function PintchSwitch() {
7  const [isOn, setIsOn] = useState(false)
8
9  const toggle = () => setIsOn(p => !p)
10
11  const handleKeyDown = (e: React.KeyboardEvent) => {
12    if (e.key === ' ' || e.key === 'Enter') {
13      e.preventDefault()
14      toggle()
15    }
16  }
17
18  const playClick = useSound("/audio/ui-sounds/toggle-2.mp3");
19
20  return (
21    <button
22      role="switch"
23      aria-checked={isOn}
24      onClick={() => {
25        toggle();
26        playClick();
27      }}
28      onKeyDown={handleKeyDown}
29      className={[
30        'relative flex items-center',
31        'w-[120px] h-[46px] rounded-full',
32        'cursor-pointer outline-none select-none',
33        'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-neutral-400',
34        'bg-[#e8e8e8] dark:bg-[#151518]',
35        'shadow-[inset_3px_3px_7px_rgba(0,0,0,0.09),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]',
36        'dark:shadow-[inset_3px_3px_7px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(50,50,65,0.35)]',
37      ].join(' ')}
38    >
39      {/* Left dot — visible when ON */}
40      <span
41        aria-hidden="true"
42        className={[
43          'pointer-events-none absolute left-[13px]',
44          'w-[5px] h-[5px] rounded-full',
45          'bg-[#a8b8c4] dark:bg-[#607a8c]',
46          'transition-opacity duration-300',
47          isOn ? 'opacity-60' : 'opacity-0',
48        ].join(' ')}
49      />
50
51      {/* Right dot — orange, visible when OFF */}
52      <span
53        aria-hidden="true"
54        className={[
55          'pointer-events-none absolute right-[13px]',
56          'w-[5px] h-[5px] rounded-full',
57          'bg-[#f05a00] dark:bg-[#ff6820]',
58          'transition-opacity duration-300',
59          isOn ? 'opacity-0' : 'opacity-100',
60        ].join(' ')}
61      />
62
63      {/* Thumb */}
64      <span
65        aria-hidden="true"
66        className={[
67          'pointer-events-none absolute top-[3px] left-[3px]',
68          'flex items-center justify-center gap-[4px]',
69          'px-[3px] h-[40px] rounded-full',
70          'bg-[#e5e5e5] dark:bg-[#2a2a32]',
71          'transition-transform duration-300 ease-in-out',
72          // Light: strong white top-highlight + soft bottom shadow
73          // Dark: replace white highlights with low-opacity light tint; keep the bottom shadow heavy
74// … truncated