first commit

2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
@@ -0,0 +1,88 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import CircularProgress, {
+  circularProgressClasses,
+} from '@mui/material/CircularProgress';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 5,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 5,
+    backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
+  },
+}));
+
+// Inspired by the former Facebook spinners.
+function FacebookCircularProgress(props) {
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <CircularProgress
+        variant="determinate"
+        sx={{
+          color: (theme) =>
+            theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
+        }}
+        size={40}
+        thickness={4}
+        {...props}
+        value={100}
+      />
+      <CircularProgress
+        variant="indeterminate"
+        disableShrink
+        sx={{
+          color: (theme) => (theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8'),
+          animationDuration: '550ms',
+          position: 'absolute',
+          left: 0,
+          [`& .${circularProgressClasses.circle}`]: {
+            strokeLinecap: 'round',
+          },
+        }}
+        size={40}
+        thickness={4}
+        {...props}
+      />
+    </Box>
+  );
+}
+
+export default function Customization() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Customization
+        </Typography>
+
+        <Box sx={{ flexGrow: 1 }}>
+          <FacebookCircularProgress />
+          <br />
+          <BorderLinearProgress variant="determinate" value={50} />
+        </Box>
+      </Card>
+    </>
+  );
+}