Files
react-test/docs/data/joy/customization/creating-themed-components/StatComponent.js
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

30 lines
723 B
JavaScript

import { styled } from '@mui/joy/styles';
const StatRoot = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(0.5),
padding: theme.spacing(3, 4),
backgroundColor: theme.vars.palette.background.surface,
borderRadius: theme.vars.radius.sm,
boxShadow: theme.vars.shadow.md,
}));
const StatValue = styled('div')(({ theme }) => ({
...theme.typography.h2,
}));
const StatUnit = styled('div')(({ theme }) => ({
...theme.typography['body-sm'],
color: theme.vars.palette.text.tertiary,
}));
export default function StatComponent() {
return (
<StatRoot>
<StatValue>19,267</StatValue>
<StatUnit>Active users / month</StatUnit>
</StatRoot>
);
}