Toggle Component

Toggle

This component provides Toggle functionality.

Props

• prop1: Description of prop1.
• prop2: Description of prop2.

Usage

import { Toggle } from './Toggle';

const props = {};

<Toggle prop1="value1" prop2="value2" />;

import { Switch } from '@headlessui/react';
import type { FC } from 'react';

import cn from '../cn';

interface ToggleProps {
  on: boolean;
  setOn: (on: boolean) => void;
}

export const Toggle: FC<ToggleProps> = ({ on, setOn }) => {
  return (
    <Switch
      checked={on}
      onChange={() => {
        setOn(!on);
      }}
      className={cn(
        on ? 'bg-brand-500' : 'bg-gray-200 dark:bg-gray-700',
        'inline-flex h-[22px] w-[42.5px] min-w-[42.5px] cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none'
      )}
    >
      <span
        aria-hidden="true"
        className={cn(
          on ? 'translate-x-5' : 'translate-x-0',
          'pointer-events-none inline-block h-[18px] w-[18px] rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
        )}
      />
    </Switch>
  );
};