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
64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
import AspectRatio from '@mui/joy/AspectRatio';
|
|
import Button from '@mui/joy/Button';
|
|
import Card from '@mui/joy/Card';
|
|
import CardContent from '@mui/joy/CardContent';
|
|
import IconButton from '@mui/joy/IconButton';
|
|
import Typography from '@mui/joy/Typography';
|
|
import Skeleton from '@mui/joy/Skeleton';
|
|
import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
|
|
|
|
export default function BasicCardSkeleton() {
|
|
return (
|
|
<Card variant="outlined" sx={{ width: 320 }}>
|
|
<div>
|
|
<Typography level="h2" sx={{ fontSize: 'md', mb: 0.5 }}>
|
|
<Skeleton>Yosemite National Park</Skeleton>
|
|
</Typography>
|
|
<Typography level="body-sm">
|
|
<Skeleton>April 24 to May 02, 2021</Skeleton>
|
|
</Typography>
|
|
<IconButton
|
|
aria-label="bookmark Bahamas Islands"
|
|
variant="plain"
|
|
color="neutral"
|
|
size="sm"
|
|
sx={{ position: 'absolute', top: '0.5rem', right: '0.5rem' }}
|
|
>
|
|
<BookmarkAdd />
|
|
<Skeleton />
|
|
</IconButton>
|
|
</div>
|
|
<AspectRatio minHeight="120px" maxHeight="200px">
|
|
<Skeleton>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286"
|
|
srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286&dpr=2 2x"
|
|
loading="lazy"
|
|
alt=""
|
|
/>
|
|
</Skeleton>
|
|
</AspectRatio>
|
|
<CardContent orientation="horizontal">
|
|
<div>
|
|
<Typography level="body-xs">
|
|
<Skeleton>Total price:</Skeleton>
|
|
</Typography>
|
|
<Typography sx={{ fontSize: 'lg', fontWeight: 'lg' }}>
|
|
<Skeleton>$2,900</Skeleton>
|
|
</Typography>
|
|
</div>
|
|
<Button
|
|
variant="solid"
|
|
size="sm"
|
|
color="primary"
|
|
aria-label="Explore Bahamas Islands"
|
|
sx={{ ml: 'auto', fontWeight: 600 }}
|
|
>
|
|
Explore
|
|
<Skeleton />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|