naming consistency

packages/ui/components/EditorSwitch.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 
 // Define styles as constants outside the component to avoid recreating these during each render
 const transitionStyle = 'transition duration-200 ease-in-out'
-const switchClass = 'relative bg-gray-800 flex h-[35px] w-[62px] cursor-pointer rounded'
+const switchStyle = 'relative bg-gray-800 flex h-[35px] w-[62px] cursor-pointer rounded'
 const switchSpanClass =
   'pointer-events-none absolute h-[25px] inline-block w-[25px] transform rounded bg-primary transition duration-200 ease-in-out'
 const switchIconsClass = 'flex flex-grow justify-between content-center z-10 m-[4px]'
@@ -18,16 +18,16 @@ export interface EditorSwitchProps {
 export const EditorSwitch: React.FC<EditorSwitchProps> = ({ isCodeEditor = true, onSwitchChange }) => {
   const visualIconStyle = classNames(transitionStyle, isCodeEditor ? 'stroke-gray-400' : 'stroke-white')
   const codeIconStyle = classNames(transitionStyle, isCodeEditor ? 'stroke-white' : 'stroke-gray-400')
-  const spanClass = classNames(switchSpanClass, isCodeEditor ? 'translate-x-7' : 'translate-x-0')
+  const thumbStyle = classNames(switchSpanClass, isCodeEditor ? 'translate-x-7' : 'translate-x-0')
 
   return (
-    <Switch.Root checked={isCodeEditor} onCheckedChange={onSwitchChange} className={switchClass} id='editor-switch'>
+    <Switch.Root checked={isCodeEditor} onCheckedChange={onSwitchChange} className={switchStyle} id='editor-switch'>
       <div className='absolute inset-[5px] flex flex-grow'>
         <div className={switchIconsClass}>
           <EyeIcon className={visualIconStyle} />
           <CodeBracketIcon className={codeIconStyle} />
         </div>
-        <Switch.Thumb aria-hidden='true' className={spanClass} />
+        <Switch.Thumb aria-hidden='true' className={thumbStyle} />
       </div>
     </Switch.Root>
   )