119 lines
5.0 KiB
TypeScript
119 lines
5.0 KiB
TypeScript
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>
|
|
)
|
|
}
|