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

import React from 'react';
import {Badge} from "../../src/primitive-components/badge/badge";
import {Divider} from "../../src/primitive-components/divider/divider";

export default function Badges() {
    return (
        <div className={"m3 m3-wrapper"} style={{display:"flex", flexDirection:"row"}}>
            <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 disableValue/>
                    </div>
                    <Divider/>
                    <div style={{
                        width: "24px",
                        aspectRatio: 1,
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center"
                    }}>
                        <Badge disableValue>3487</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>
                    <Divider/>
                    <div style={{
                        width: "24px",
                        aspectRatio: 1,
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center"
                    }}>
                        <Badge>322342</Badge>
                    </div>
                </div>
            </div>
            {/*<Divider orientation={"vertical"} variant={"full-width"}/>*/}
            {/*<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>
    );
}