import { Switch } from '@ma9pie/lite-ui';
import React, { useState } from 'react';

const App = () => {
  const [checked, setChecked] = useState(false);

  const handleChange = (value: boolean) => {
    setChecked(value);
  };

  return (
    <div className="flex items-center gap-2">
      <Switch onChange={handleChange}></Switch>
      <p>{checked ? 'on' : 'off'}</p>
    </div>
  );
};

export default App;

import { Switch } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <Switch size={24}></Switch>
      <Switch></Switch>
      <Switch size={40}></Switch>
    </div>
  );
};

export default App;

import { Switch } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <Switch trackPadding={2}></Switch>
      <Switch></Switch>
      <Switch trackPadding={4}></Switch>
    </div>
  );
};

export default App;

import { Switch } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <Switch defaultChecked trackColor="#ef4444"></Switch>
      <Switch defaultChecked trackColor="#eab308"></Switch>
      <Switch defaultChecked trackColor="#22c55e"></Switch>
      <Switch defaultChecked trackColor="#3b82f6"></Switch>
      <Switch defaultChecked trackColor="#8b5cf6"></Switch>
    </div>
  );
};

export default App;

import { Switch } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <Switch duration={0}></Switch>
      <Switch></Switch>
      <Switch duration={300}></Switch>
    </div>
  );
};

export default App;

import { Switch } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  return (
    <div className="flex items-center gap-2">
      <Switch></Switch>
      <Switch disabled></Switch>
      <Switch defaultChecked disabled></Switch>
    </div>
  );
};

export default App;