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
95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
import * as React from 'react';
|
|
import Card from '@mui/material/Card';
|
|
import CardHeader from '@mui/material/CardHeader';
|
|
import CardContent from '@mui/material/CardContent';
|
|
import CardMedia from '@mui/material/CardMedia';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Typography from '@mui/material/Typography';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
|
import Skeleton from '@mui/material/Skeleton';
|
|
|
|
interface MediaProps {
|
|
loading?: boolean;
|
|
}
|
|
|
|
function Media(props: MediaProps) {
|
|
const { loading = false } = props;
|
|
|
|
return (
|
|
<Card sx={{ maxWidth: 345, m: 2 }}>
|
|
<CardHeader
|
|
avatar={
|
|
loading ? (
|
|
<Skeleton animation="wave" variant="circular" width={40} height={40} />
|
|
) : (
|
|
<Avatar
|
|
alt="Ted talk"
|
|
src="https://pbs.twimg.com/profile_images/877631054525472768/Xp5FAPD5_reasonably_small.jpg"
|
|
/>
|
|
)
|
|
}
|
|
action={
|
|
loading ? null : (
|
|
<IconButton aria-label="settings">
|
|
<MoreVertIcon />
|
|
</IconButton>
|
|
)
|
|
}
|
|
title={
|
|
loading ? (
|
|
<Skeleton
|
|
animation="wave"
|
|
height={10}
|
|
width="80%"
|
|
style={{ marginBottom: 6 }}
|
|
/>
|
|
) : (
|
|
'Ted'
|
|
)
|
|
}
|
|
subheader={
|
|
loading ? (
|
|
<Skeleton animation="wave" height={10} width="40%" />
|
|
) : (
|
|
'5 hours ago'
|
|
)
|
|
}
|
|
/>
|
|
{loading ? (
|
|
<Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
|
|
) : (
|
|
<CardMedia
|
|
component="img"
|
|
height="140"
|
|
image="https://pi.tedcdn.com/r/talkstar-photos.s3.amazonaws.com/uploads/72bda89f-9bbf-4685-910a-2f151c4f3a8a/NicolaSturgeon_2019T-embed.jpg?w=512"
|
|
alt="Nicola Sturgeon on a TED talk stage"
|
|
/>
|
|
)}
|
|
<CardContent>
|
|
{loading ? (
|
|
<React.Fragment>
|
|
<Skeleton animation="wave" height={10} style={{ marginBottom: 6 }} />
|
|
<Skeleton animation="wave" height={10} width="80%" />
|
|
</React.Fragment>
|
|
) : (
|
|
<Typography variant="body2" component="p" sx={{ color: 'text.secondary' }}>
|
|
{
|
|
"Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:"
|
|
}
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default function Facebook() {
|
|
return (
|
|
<div>
|
|
<Media loading />
|
|
<Media />
|
|
</div>
|
|
);
|
|
}
|