import {Fragment} from "react";
import Buttons from "./components/buttons"
import Switches from "./components/switches";
import Checkboxes from "./components/checkboxes";
import Radios from "./components/radios";
import Fabs from "./components/fabs";
import IconButtons from "./components/icon-buttons";
import {TextFields} from "./components/text-fields";

export default function Page() {
    return(
        <Fragment>
            <div style={{
                display: "flex",
                flexDirection:"column",
                justifyContent: "center",
                alignItems: "center",
                width: "100%",
                gap: "0em"
            }}>
                <h1>Google Material You UI kit</h1>
                <div style={{
                        display: "flex",
                        flexDirection:"row",
                        justifyContent: "center",
                        alignItems: "center",
                        gap:"20px"
                }}>
                    {/*<div style={{*/}
                    {/*    display: "flex",*/}
                    {/*    flexDirection:"column",*/}
                    {/*    gap:"20px",*/}
                    {/*}}>*/}
                    {/*    <Buttons/>*/}
                    {/*    <IconButtons/>*/}
                    {/*</div>*/}
                    {/*<Switches/>*/}
                    {/*<Checkboxes/>*/}
                    {/*<Radios/>*/}
                    {/*<Fabs/>*/}
                    <TextFields/>
                </div>
            </div>
        </Fragment>
    )
}