first commit

2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
@@ -0,0 +1,118 @@
+import React from "react";
+import PropTypes from 'prop-types';
+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';
+
+function Media(props) {
+  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" color="text.secondary" component="p">
+            {
+              "Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:"
+            }
+          </Typography>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+Media.propTypes = {
+  loading: PropTypes.bool,
+};
+
+export default function WaveExample() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Wave Example
+        </Typography>
+
+        <>
+          <Media loading />
+          <Media />
+        </>
+      </Card>
+    </>
+  );
+}