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
79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import * as React from 'react';
|
|
import MuiChip from '@mui/material/Chip';
|
|
import MuiCardMedia from '@mui/material/CardMedia';
|
|
import MuiCard, { CardProps } from '@mui/material/Card';
|
|
import MuiSwitch from '@mui/material/Switch';
|
|
import MuiTypography from '@mui/material/Typography';
|
|
import MuiStack from '@mui/material/Stack';
|
|
import MuiRating from '@mui/material/Rating';
|
|
import { withPointer } from 'docs/src/components/home/ElementPointer';
|
|
|
|
export const componentCode = `
|
|
<Card>
|
|
<CardMedia
|
|
component="img"
|
|
alt="Yosemite National Park"
|
|
image="/static/images/cards/yosemite.jpeg"
|
|
/>
|
|
<Stack direction="row" alignItems="center" spacing={3} p={2} useFlexGap>
|
|
<Stack direction="column" spacing={0.5} useFlexGap>
|
|
<Typography>Yosemite National Park, California, USA</Typography>
|
|
<Stack direction="row" spacing={1} useFlexGap>
|
|
<Chip
|
|
size="small"
|
|
label={active ? 'Active' : 'Inactive'}
|
|
color={active ? 'success' : 'default'}
|
|
/>
|
|
<Rating defaultValue={4} size="small" />
|
|
</Stack>
|
|
</Stack>
|
|
<Switch checked={active} />
|
|
</Stack>
|
|
</Card>
|
|
`;
|
|
|
|
const Card = withPointer(MuiCard, { id: 'card', name: 'Card' });
|
|
const CardMedia = withPointer(MuiCardMedia, { id: 'cardmedia', name: 'CardMedia' });
|
|
const Stack = withPointer(MuiStack, { id: 'stack', name: 'Stack' });
|
|
const Stack2 = withPointer(MuiStack, { id: 'stack2', name: 'Stack' });
|
|
const Stack3 = withPointer(MuiStack, { id: 'stack3', name: 'Stack' });
|
|
const Typography = withPointer(MuiTypography, { id: 'typography', name: 'Typography' });
|
|
const Chip = withPointer(MuiChip, { id: 'chip', name: 'Chip' });
|
|
const Rating = withPointer(MuiRating, { id: 'rating', name: 'Rating' });
|
|
const Switch = withPointer(MuiSwitch, { id: 'switch', name: 'Switch' });
|
|
|
|
export default function MaterialDesignDemo(props: CardProps) {
|
|
const [active, setActive] = React.useState(true);
|
|
return (
|
|
<Card {...props} variant="outlined" sx={{ p: 2 }}>
|
|
<CardMedia
|
|
component="img"
|
|
alt="Yosemite National Park"
|
|
height="100"
|
|
image="/static/images/cards/yosemite.jpeg"
|
|
sx={{ borderRadius: 0.5 }}
|
|
/>
|
|
<Stack alignItems="center" direction="row" spacing={3} mt={2} useFlexGap>
|
|
<Stack2 direction="column" spacing={0.5} useFlexGap>
|
|
<Typography fontWeight="semiBold">Yosemite National Park, California, USA</Typography>
|
|
<Stack3 direction="row" spacing={1} useFlexGap>
|
|
<Chip
|
|
label={active ? 'Active' : 'Inactive'}
|
|
color={active ? 'success' : 'default'}
|
|
size="small"
|
|
sx={{ width: 'fit-content', fontSize: 12, height: 20, px: 0, zIndex: 2 }}
|
|
/>
|
|
<Rating name="Rating component" defaultValue={4} size="small" />
|
|
</Stack3>
|
|
</Stack2>
|
|
<Switch
|
|
inputProps={{ 'aria-label': active ? 'Active' : 'Inactive' }}
|
|
checked={active}
|
|
onChange={(event) => setActive(event.target.checked)}
|
|
sx={{ ml: 'auto' }}
|
|
/>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|