material-you-react/app/components/switches.tsx

'use client';

import React from 'react';
import { Switch } from '../../src/primitive-components/components';

export default function Switches() {
    return (
        <div
            className={'m3 m3-wrapper'}
            style={{ display: 'flex', flexDirection: 'column', gap: '1.5em' }}
        >
            <h1> Switches </h1>
            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <h2 style={{ margin: 0 }}> Without icon </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            width: '100%',
                            gap: '2em',
                        }}
                    >
                        <div>
                            <h2> Default </h2>
                            <Switch />
                            <Switch defaultChecked />
                        </div>
                        <div>
                            <h2> Disabled </h2>
                            <Switch disabled />
                            <Switch defaultChecked disabled />
                        </div>
                    </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <h2 style={{ margin: 0 }}> With icon (both)</h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            width: '100%',
                            gap: '2em',
                        }}
                    >
                        <div>
                            <h2> Default </h2>
                            <Switch icon />
                            <Switch defaultChecked icon />
                        </div>
                        <div>
                            <h2> Disabled </h2>
                            <Switch disabled icon />
                            <Switch defaultChecked disabled icon />
                        </div>
                    </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <h2 style={{ margin: 0 }}> With icon (selected)</h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            width: '100%',
                            gap: '2em',
                        }}
                    >
                        <div>
                            <h2> Default </h2>
                            <Switch icon selected />
                            <Switch defaultChecked icon selected />
                        </div>
                        <div>
                            <h2> Disabled </h2>
                            <Switch disabled icon selected />
                            <Switch defaultChecked disabled icon selected />
                        </div>
                    </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <h2 style={{ margin: 0 }}> With label</h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            width: '100%',
                            gap: '2em',
                        }}
                    >
                        <div>
                            <h2> Default </h2>
                            <Switch icon labelPlacement={'left'} />
                            <Switch icon selected />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}