community-rule/app/components/Switch/Switch.view.tsx

import { forwardRef } from "react";
import type { SwitchViewProps } from "./Switch.types";

export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
  (
    {
      switchId,
      checked,
      label,
      switchClasses,
      trackClasses,
      thumbClasses,
      labelClasses,
      onClick,
      onKeyDown,
      onFocus,
      onBlur,
      ...rest
    },
    ref,
  ) => {
    return (
      <div className="flex items-center">
        <button
          ref={ref}
          id={switchId}
          type="button"
          role="switch"
          aria-checked={checked}
          aria-label={label || "Toggle switch"}
          onClick={onClick}
          onKeyDown={onKeyDown}
          onFocus={onFocus}
          onBlur={onBlur}
          className={switchClasses}
          {...rest}
        >
          <div className={trackClasses}>
            <div className={thumbClasses} />
          </div>
        </button>
        {label && <span className={labelClasses}>{label}</span>}
      </div>
    );
  },
);

SwitchView.displayName = "SwitchView";