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
51 lines
1.7 KiB
JavaScript
51 lines
1.7 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 BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
|
|
|
|
export default function BasicCard() {
|
|
return (
|
|
<Card sx={{ width: 320 }}>
|
|
<div>
|
|
<Typography level="title-lg">Yosemite National Park</Typography>
|
|
<Typography level="body-sm">April 24 to May 02, 2021</Typography>
|
|
<IconButton
|
|
aria-label="bookmark Bahamas Islands"
|
|
variant="plain"
|
|
color="neutral"
|
|
size="sm"
|
|
sx={{ position: 'absolute', top: '0.875rem', right: '0.5rem' }}
|
|
>
|
|
<BookmarkAdd />
|
|
</IconButton>
|
|
</div>
|
|
<AspectRatio minHeight="120px" maxHeight="200px">
|
|
<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=""
|
|
/>
|
|
</AspectRatio>
|
|
<CardContent orientation="horizontal">
|
|
<div>
|
|
<Typography level="body-xs">Total price:</Typography>
|
|
<Typography sx={{ fontSize: 'lg', fontWeight: 'lg' }}>$2,900</Typography>
|
|
</div>
|
|
<Button
|
|
variant="solid"
|
|
size="md"
|
|
color="primary"
|
|
aria-label="Explore Bahamas Islands"
|
|
sx={{ ml: 'auto', alignSelf: 'center', fontWeight: 600 }}
|
|
>
|
|
Explore
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|