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
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import AspectRatio from '@mui/joy/AspectRatio';
|
|
import Box from '@mui/joy/Box';
|
|
import Typography from '@mui/joy/Typography';
|
|
import Card from '@mui/joy/Card';
|
|
|
|
const data = [
|
|
{
|
|
src: 'https://images.unsplash.com/photo-1502657877623-f66bf489d236',
|
|
title: 'Night view',
|
|
description: '4.21M views',
|
|
},
|
|
{
|
|
src: 'https://images.unsplash.com/photo-1527549993586-dff825b37782',
|
|
title: 'Lake view',
|
|
description: '4.74M views',
|
|
},
|
|
{
|
|
src: 'https://images.unsplash.com/photo-1532614338840-ab30cf10ed36',
|
|
title: 'Mountain view',
|
|
description: '3.98M views',
|
|
},
|
|
];
|
|
|
|
export default function CarouselRatio() {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
gap: 1,
|
|
py: 1,
|
|
overflow: 'auto',
|
|
width: 343,
|
|
scrollSnapType: 'x mandatory',
|
|
'& > *': {
|
|
scrollSnapAlign: 'center',
|
|
},
|
|
'::-webkit-scrollbar': { display: 'none' },
|
|
}}
|
|
>
|
|
{data.map((item) => (
|
|
<Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
|
|
<AspectRatio ratio="1" sx={{ minWidth: 60 }}>
|
|
<img
|
|
srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
|
|
src={`${item.src}?h=120&fit=crop&auto=format`}
|
|
alt={item.title}
|
|
/>
|
|
</AspectRatio>
|
|
<Box sx={{ whiteSpace: 'nowrap', mx: 1 }}>
|
|
<Typography level="title-md">{item.title}</Typography>
|
|
<Typography level="body-sm">{item.description}</Typography>
|
|
</Box>
|
|
</Card>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|