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

119 lines
4.5 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:"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>
);
}