Files
react-test/docs/data/joy/components/card/OverflowCard.tsx
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

48 lines
1.5 KiB
TypeScript

import AspectRatio from '@mui/joy/AspectRatio';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
import CardOverflow from '@mui/joy/CardOverflow';
import Divider from '@mui/joy/Divider';
import Typography from '@mui/joy/Typography';
export default function OverflowCard() {
return (
<Card variant="outlined" sx={{ width: 320 }}>
<CardOverflow>
<AspectRatio ratio="2">
<img
src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318"
srcSet="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318&dpr=2 2x"
loading="lazy"
alt=""
/>
</AspectRatio>
</CardOverflow>
<CardContent>
<Typography level="title-md">Yosemite National Park</Typography>
<Typography level="body-sm">California</Typography>
</CardContent>
<CardOverflow variant="soft" sx={{ bgcolor: 'background.level1' }}>
<Divider inset="context" />
<CardContent orientation="horizontal">
<Typography
level="body-xs"
textColor="text.secondary"
sx={{ fontWeight: 'md' }}
>
6.3k views
</Typography>
<Divider orientation="vertical" />
<Typography
level="body-xs"
textColor="text.secondary"
sx={{ fontWeight: 'md' }}
>
1 hour ago
</Typography>
</CardContent>
</CardOverflow>
</Card>
);
}