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
49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
import Avatar from '@mui/joy/Avatar';
|
|
import Box from '@mui/joy/Box';
|
|
import List from '@mui/joy/List';
|
|
import ListItem from '@mui/joy/ListItem';
|
|
import ListItemContent from '@mui/joy/ListItemContent';
|
|
import ListItemDecorator from '@mui/joy/ListItemDecorator';
|
|
import Typography from '@mui/joy/Typography';
|
|
|
|
export default function EllipsisList() {
|
|
return (
|
|
<Box sx={{ width: 320 }}>
|
|
<Typography
|
|
id="ellipsis-list-demo"
|
|
level="body-xs"
|
|
sx={{ textTransform: 'uppercase', letterSpacing: '0.15rem' }}
|
|
>
|
|
Inbox
|
|
</Typography>
|
|
<List
|
|
aria-labelledby="ellipsis-list-demo"
|
|
sx={{ '--ListItemDecorator-size': '56px' }}
|
|
>
|
|
<ListItem>
|
|
<ListItemDecorator>
|
|
<Avatar src="/static/images/avatar/1.jpg" />
|
|
</ListItemDecorator>
|
|
<ListItemContent>
|
|
<Typography level="title-sm">Brunch this weekend?</Typography>
|
|
<Typography level="body-sm" noWrap>
|
|
I'll be in your neighborhood doing errands this Tuesday.
|
|
</Typography>
|
|
</ListItemContent>
|
|
</ListItem>
|
|
<ListItem>
|
|
<ListItemDecorator>
|
|
<Avatar src="/static/images/avatar/2.jpg" />
|
|
</ListItemDecorator>
|
|
<ListItemContent>
|
|
<Typography level="title-sm">Summer BBQ</Typography>
|
|
<Typography level="body-sm" noWrap>
|
|
Wish I could come, but I'm out of town this Friday.
|
|
</Typography>
|
|
</ListItemContent>
|
|
</ListItem>
|
|
</List>
|
|
</Box>
|
|
);
|
|
}
|