Switch

import React from 'react';
import { Switch } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center gap-2'>
      <Switch />
    </div>
  );
}

import React from 'react';
import { Switch } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center gap-2'>
      <Switch />
      <Switch defaultChecked />
      <Switch disabled />
      <Switch disabled defaultChecked />
    </div>
  );
}

import React from 'react';
import { Switch } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center gap-2'>
      <Switch variant='rounded' defaultChecked />
      <Switch variant='standard' defaultChecked />
    </div>
  );
}

import React from 'react';
import { Switch } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <div className="flex items-center justify-center gap-2">
        <Switch defaultChecked size='md' variant='rounded' />
        <Switch defaultChecked size='sm' variant='rounded' />
      </div>
      <div className="flex items-center justify-center gap-4">
        <Switch defaultChecked size='md' variant='standard' />
        <Switch defaultChecked size='sm' variant='standard' />
      </div>
    </div>
  );
}

import React from 'react';
import { Switch } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Switch defaultChecked color='primary' variant='rounded'  />
        <Switch defaultChecked color='secondary' variant='rounded' />
        <Switch defaultChecked color='info' variant='rounded' />
        <Switch defaultChecked color='warning' variant='rounded' />
        <Switch defaultChecked color='success' variant='rounded' />
        <Switch defaultChecked color='error' variant='rounded' />
        <Switch defaultChecked color='default' variant='rounded' />
      </div>
      <div className="flex flex-wrap items-center justify-center gap-4">
        <Switch defaultChecked color='primary' variant='standard' />
        <Switch defaultChecked color='secondary' variant='standard' />
        <Switch defaultChecked color='info' variant='standard' />
        <Switch defaultChecked color='warning' variant='standard' />
        <Switch defaultChecked color='success' variant='standard' />
        <Switch defaultChecked color='error' variant='standard' />
        <Switch defaultChecked color='default' variant='standard' />
      </div>
    </div>
  );
}

"use client"
 
import React, { useState }  from 'react'
import { Switch } from 'archi-ui'
 
export default function MyReactPage() {
 
  const [checked, setChecked] = useState(true)
 
  const handleChange = (event) => {
    setChecked(event.target.checked)
  }
 
  return (
    <div className="flex items-center justify-center gap-2">
      <Switch checked={checked} onChange={handleChange} variant='standard' />
      <p>Switch is checked: {String(checked)}</p>
    </div>
  );
}

import React from 'react';
import { Switch } from 'archi-ui'
import { Moon, SunMedium } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center">
      <Switch color='info' variant='standard' icon={<Moon className='text-black' />} checkedIcon={<SunMedium className='text-black' />} />
    </div>
  );
}