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

export default function Page() {
    return(
        <Fragment>
            <div style={{
                display: "flex",
                flexDirection:"column",
                justifyContent: "center",
                alignItems: "center",
                overflowX: "auto",
                gap: "0em"
            }}>
                <h1>Google Material You UI kit</h1>
                <div style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: "0.5em",
                    justifyContent: "center",
                    alignItems: "center"
                }}>
                    <Buttons/>
                    <IconButtons/>
                    <Switches/>
                    <Checkboxes/>
                    <Radios/>
                    <TextFields/>
                    <Fabs/>
                    <Badges/>
                </div>
            </div>
        </Fragment>
    )
}