143 lines
5.1 KiB
TypeScript
143 lines
5.1 KiB
TypeScript
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>
|
|
);
|
|
}
|