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

import React from 'react';
import {Switch} from "../../src/primitive-components/material-you-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 disabled defaultChecked/>
                        </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 disabled defaultChecked 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 selected icon/>
                            <Switch selected defaultChecked icon/>
                        </div>
                        <div>
                            <h2> Disabled </h2>
                            <Switch selected disabled icon/>
                            <Switch selected disabled defaultChecked icon/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}