reactbits-mcp-server/src/components/common/Preview/PreviewSwitch.jsx

MCP Server for React Bits - Access 99+ React components with animations, backgrounds, and UI elements

import { Flex, Switch, Text } from "@chakra-ui/react";

const PreviewSwitch = ({ title, isChecked, onChange, isDisabled }) => {
  const handleChange = ({ checked }) => onChange?.(checked);

  return (
    <Flex align="center" gap="4" my={6}>
      <Text fontSize="sm">{title}</Text>

      <Switch.Root
        checked={isChecked}
        onCheckedChange={handleChange}
        disabled={isDisabled}
      >
        <Switch.HiddenInput />
        <Switch.Control />
      </Switch.Root>
    </Flex>
  );
};

export default PreviewSwitch;