refactor: Standardize disabled prop naming and add slider disabled style

Unifies CustomSlider to accept only 'disabled' (removes disable/isDisabled).
Cleans up commented code and imports in CustomSelect and CustomToggle.
Adds visual disabled state (opacity + pointer-events) to Slider component.
Fixes Turing Machine midCell ref sync in shift handlers.

Author: TamimEhsan

src/app/turing-machine/page.jsx

@@ -35,12 +35,14 @@ export default function TuringMachine() {
         setCellStart(s => s + 1);
         setCellEnd(e => e + 1);
         setMidCell(m => m + 1);
+        midCellRef.current += 1;
     };
 
     const handleRightShift = () => {
         setCellStart(s => s - 1);
         setCellEnd(e => e - 1);
         setMidCell(m => m - 1);
+        midCellRef.current -= 1;
     };
 
     const handleSet = () => {

src/components/custom-select.jsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import { useState } from "react"
 import {
   Select,
   SelectContent,
@@ -7,21 +7,17 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
-
-
 export function CustomSelect({ title, options, onChange, disabled }) {
-  const [value, setValue] = React.useState(0)
+  const [value, setValue] = useState(0)
   const onChangeCover = (value) => {
     setValue(value)
     onChange(value)
   }
   return (
     <div className="space-y-2">
-      {/* <div className="flex items-center space-x-2">  */}
       <label className="text-sm font-medium whitespace-nowrap">{title}</label>
       <Select value={value} onValueChange={onChangeCover} disabled={disabled}>
         <SelectTrigger className="w-full">
-        {/* <SelectTrigger className="w-[180px]"> */}
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -35,4 +31,3 @@ export function CustomSelect({ title, options, onChange, disabled }) {
     </div>
   )
 }
-

src/components/custom-slider.jsx

@@ -1,20 +1,16 @@
-import * as React from "react"
+import { useState } from "react"
 import { Slider } from "@/components/ui/slider"
 
-
-export function CustomSlider({ title, onChange, min, max, step, defaultValue, disable, isDisabled, disabled: disabledProp }) {
-    const disabled = disable || isDisabled || disabledProp || false;
-    const [value, setValue] = React.useState(defaultValue)
+export function CustomSlider({ title, onChange, min, max, step, defaultValue, disabled }) {
+    const [value, setValue] = useState(defaultValue)
     const onChangeCover = (values) => {
         const val = values[0]
         setValue(val)
         onChange(val)
     }
 
-
     return (
       <div className="space-y-2">
-     {/* <div className="flex items-center space-x-2"> */}
       <label className="text-sm font-medium whitespace-nowrap">{title}</label>
       <Slider
         value={[value]}
@@ -29,4 +25,3 @@ export function CustomSlider({ title, onChange, min, max, step, defaultValue, di
     </div>
   )
 }
-

src/components/custom-toggle.jsx

@@ -1,14 +1,8 @@
-import * as React from "react"
+import { useState } from "react"
 import { Switch } from "@/components/ui/switch"
 
-// interface CustomToggleProps {
-//   title: string
-//   checked: boolean
-//   onCheckedChange: (checked: boolean) => void
-// }
-
 export function CustomToggle({ title, onCheckedChange, disabled }) {
-    const [checked, setChecked] = React.useState(false)
+    const [checked, setChecked] = useState(false)
     const onCheckedChangeCover = (checked) => {
         setChecked(checked)
         onCheckedChange(checked)
@@ -25,4 +19,3 @@ export function CustomToggle({ title, onCheckedChange, disabled }) {
         </div>
     )
 }
-

src/components/ui/slider.jsx

@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils"
 const Slider = React.forwardRef(({ className, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
-    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    className={cn("relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50 data-[disabled]:pointer-events-none", className)}
     {...props}>
     <SliderPrimitive.Track
       className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">