first commit

2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
@@ -0,0 +1,80 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import { styled } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
+import Paper from '@mui/material/Paper';
+import TagFacesIcon from '@mui/icons-material/TagFaces';
+
+const ListItem = styled('li')(({ theme }) => ({
+  margin: theme.spacing(0.5),
+}));
+
+export default function ChipArray() {
+
+  const [chipData, setChipData] = React.useState([
+    { key: 0, label: 'Angular' },
+    { key: 1, label: 'jQuery' },
+    { key: 2, label: 'Polymer' },
+    { key: 3, label: 'React' },
+    { key: 4, label: 'Vue.js' },
+  ]);
+
+  const handleDelete = (chipToDelete) => () => {
+    setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key));
+  };
+
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Chip Array
+        </Typography>
+
+        <Paper
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+            listStyle: 'none',
+            p: 0.5,
+            m: 0,
+          }}
+          component="ul"
+        >
+          {chipData.map((data) => {
+            let icon;
+
+            if (data.label === 'React') {
+              icon = <TagFacesIcon />;
+            }
+
+            return (
+              <ListItem key={data.key}>
+                <Chip
+                  icon={icon}
+                  label={data.label}
+                  onDelete={data.label === 'React' ? undefined : handleDelete(data)}
+                />
+              </ListItem>
+            );
+          })}
+        </Paper>
+      </Card>
+    </>
+  );
+}