first commit

2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
@@ -0,0 +1,107 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import PropTypes from 'prop-types';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
+
+const data = [
+  {
+    src: 'https://i.ytimg.com/vi/pLqipJNItIo/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLBkklsyaw9FxDmMKapyBYCn9tbPNQ',
+    title: 'Don Diablo @ Tomorrowland Main Stage 2019 | Official…',
+    channel: 'Don Diablo',
+    views: '396k views',
+    createdAt: 'a week ago',
+  },
+  {
+    src: 'https://i.ytimg.com/vi/_Uu12zY01ts/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCpX6Jan2rxrCAZxJYDXppTP4MoQA',
+    title: 'Queen - Greatest Hits',
+    channel: 'Queen Official',
+    views: '40M views',
+    createdAt: '3 years ago',
+  },
+  {
+    src: 'https://i.ytimg.com/vi/kkLk2XWMBf8/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLB4GZTFu1Ju2EPPPXnhMZtFVvYBaw',
+    title: 'Calvin Harris, Sam Smith - Promises (Official Video)',
+    channel: 'Calvin Harris',
+    views: '130M views',
+    createdAt: '10 months ago',
+  },
+];
+
+function Media(props) {
+  const { loading = false } = props;
+
+  return (
+    <Grid container wrap="nowrap">
+      {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
+        <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
+          {item ? (
+            <img
+              style={{ width: 210, height: 118 }}
+              alt={item.title}
+              src={item.src}
+            />
+          ) : (
+            <Skeleton variant="rectangular" width={210} height={118} />
+          )}
+
+          {item ? (
+            <Box sx={{ pr: 2 }}>
+              <Typography gutterBottom variant="body2">
+                {item.title}
+              </Typography>
+              <Typography display="block" variant="caption" color="text.secondary">
+                {item.channel}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                {`${item.views} • ${item.createdAt}`}
+              </Typography>
+            </Box>
+          ) : (
+            <Box sx={{ pt: 0.5 }}>
+              <Skeleton />
+              <Skeleton width="60%" />
+            </Box>
+          )}
+        </Box>
+      ))}
+    </Grid>
+  );
+}
+
+Media.propTypes = {
+  loading: PropTypes.bool,
+};
+
+export default function PulsateExample() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Pulsate Example
+        </Typography>
+
+        <Box sx={{ overflow: 'hidden' }}>
+          <Media loading />
+          <Media />
+        </Box>
+      </Card>
+    </>
+  );
+}