import {Fragment} from "react";
import {Badge, Divider} from "../src/primitive-components/material-you-components";

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"
                }}>
                    <div style={{
                        display: "flex",
                        flexDirection: "row",
                        gap: "0.5em",
                        justifyContent: "center",
                        alignItems: "center",
                        height: "150px",
                        backgroundColor: "#00000010",
                        padding: "10px",
                        borderRadius: "15px"
                    }}>
                        <div>
                            <div style={{
                                display: "flex",
                                flexDirection: "column",
                                gap: "0.5em",
                                justifyContent: "center",
                                alignItems: "center"
                            }}>
                                <div style={{
                                    width: "24px",
                                    aspectRatio: 1,
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center"
                                }}>
                                    <Badge/>
                                </div>
                                <Divider/>
                                <div style={{
                                    width: "24px",
                                    aspectRatio: 1,
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center"
                                }}>
                                    <Badge>5</Badge>
                                </div>
                                <Divider/>
                                <div style={{
                                    width: "24px",
                                    aspectRatio: 1,
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center"
                                }}>
                                    <Badge>32</Badge>
                                </div>
                            </div>
                        </div>
                        <Divider orientation={"vertical"} variant={"inset"}/>
                        <div>
                            <div style={{
                                display: "flex",
                                flexDirection: "column",
                                gap: "0.5em",
                                justifyContent: "center",
                                alignItems: "center"
                            }}>
                                <div style={{
                                    width: "24px",
                                    aspectRatio: 1,
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center"
                                }}>
                                    <Badge/>
                                </div>
                                <Divider variant={"inset"}/>
                                <div style={{
                                    width: "24px",
                                    aspectRatio: 1,
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center"
                                }}>
                                    <Badge>5</Badge>
                                </div>
                                <Divider/>
                                <div style={{
                                    width: "24px",
                                    aspectRatio: 1,
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center"
                                }}>
                                    <Badge>32</Badge>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    )
}