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: 'column',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <h1> Badges </h1>
            <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>
    );
}