From f0c8fe7978d646981218b59b5e5f613cf01877ab Mon Sep 17 00:00:00 2001
From: Hendrik Hassa <65833107+HennieLP@users.noreply.github.com>
Date: Fri, 27 Jun 2025 15:12:46 +0200
Subject: added the option to Flipp the bits

---
 src/components/Cidr.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Cidr.tsx b/src/components/Cidr.tsx
index ac22ea6..dfb7aa2 100644
--- a/src/components/Cidr.tsx
+++ b/src/components/Cidr.tsx
@@ -31,6 +31,13 @@ export default function Cidr({ embed = false }: CidrProps) {
         setIp(newIp);
     }
 
+    const toggleBit = (octetIndex: number, bitIndex: number) => {
+        const newIp = [...ip];
+        // Toggle the bit at the specified position
+        newIp[octetIndex] ^= (1 << (7 - bitIndex));
+        setIp(newIp);
+    }
+
     // This function will now be called by our manual event listener
     // Note: The event type is now native WheelEvent, not React.WheelEvent
     const processWheelEvent = (event: WheelEvent, i: number, max: number) => {
@@ -264,7 +271,12 @@ export default function Cidr({ embed = false }: CidrProps) {
 
             <div className="flex flex-wrap justify-center gap-4 mt-10">
                 {bits.map((octet, i) => <span key={`octet-${i}`} className="px-1">
-                    {octet.map((bit, j) => <span key={`octet-${i}-bit-${j}`} className={`font-mono border-y ${j === 0 && "border-l"} border-r border-gray-700 px-2 py-1 ${i * 8 + j < cidr ? cols[i] : cols[4]}`}>{bit}</span>)}
+                    {octet.map((bit, j) => <button key={`octet-${i}-bit-${j}`} 
+                        className={`font-mono border-y ${j === 0 && "border-l"} border-r border-gray-700 px-2 py-1 cursor-pointer hover:bg-gray-200 active:bg-gray-300 transition-colors ${i * 8 + j < cidr ? cols[i] : cols[4]}`}
+                        onClick={() => toggleBit(i, j)}
+                        title={`Toggle bit ${i * 8 + j + 1} (click to flip)`}
+                        aria-label={`Bit ${i * 8 + j + 1}, current value ${bit}, click to toggle`}
+                    >{bit}</button>)}
                 </span>)}
             </div>
 
-- 
cgit v1.3.1