first commit

components/UIElements/Chip/Basic.js

@@ -0,0 +1,36 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function Basic() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Basic
+        </Typography>
+
+        <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+          <Chip label="Chip Filled" />
+          <Chip label="Chip Outlined" variant="outlined" />
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Chip/ChipActions.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function ChipActions() {
+
+  const handleClick = () => {
+    console.info('You clicked the Chip.');
+  };
+
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Chip Actions
+        </Typography>
+
+        <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+          <Chip label="Clickable" onClick={handleClick} />
+          <Chip label="Clickable" variant="outlined" onClick={handleClick} />
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Chip/ChipAdornments.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function ChipAdornments() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Chip Adornments
+        </Typography>
+
+        <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+          <Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
+          <Chip
+            avatar={<Avatar alt="Natacha" src="/images/user1.png" />}
+            label="Avatar"
+            variant="outlined"
+          />
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Chip/ChipArray.js

@@ -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>
+    </>
+  );
+}

components/UIElements/Chip/ClickableAndDeletable.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function ClickableAndDeletable() {
+  const handleClick = () => {
+    console.info('You clicked the Chip.');
+  };
+
+  const handleDelete = () => {
+    console.info('You clicked the delete icon.');
+  };
+
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Clickable And Deletable
+        </Typography>
+
+        <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+          <Chip
+            label="Clickable Deletable"
+            onClick={handleClick}
+            onDelete={handleDelete}
+          />
+          <Chip
+            label="Clickable Deletable"
+            variant="outlined"
+            onClick={handleClick}
+            onDelete={handleDelete}
+          />
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Chip/ClickableLink.js

@@ -0,0 +1,42 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function ClickableLink() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Clickable Link
+        </Typography>
+
+        <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+          <Chip label="Clickable Link" component="a" href="#basic-chip" clickable />
+          <Chip
+            label="Clickable Link"
+            component="a"
+            href="#basic-chip"
+            variant="outlined"
+            clickable
+          />
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Chip/ColorChip.js

@@ -0,0 +1,62 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function ColorChip() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Color Chip
+        </Typography>
+
+        <Stack spacing={1} alignItems="center" className="chip-gap-for-rtl">
+          <Stack direction="row" spacing={1}>
+
+            <Chip 
+              label="Primary" 
+              color="primary" 
+              className="whiteColor"
+            />
+
+            <Chip 
+              label="Secondary" 
+              color="secondary" 
+              className="whiteColor"
+            />
+
+            <Chip 
+              label="Success" 
+              color="success" 
+              className="whiteColor"
+            />
+          </Stack>
+
+          <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+            <Chip label="Primary" color="primary" variant="outlined" />
+
+            <Chip label="Secondary" color="secondary" variant="outlined" />
+
+            <Chip label="Success" color="success" variant="outlined" />
+          </Stack>
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Chip/CustomDeleteIcon.js

@@ -0,0 +1,58 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import DoneIcon from '@mui/icons-material/Done';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+export default function CustomDeleteIcon() {
+
+  const handleClick = () => {
+    console.info('You clicked the Chip.');
+  };
+
+  const handleDelete = () => {
+    console.info('You clicked the delete icon.');
+  };
+
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Custom Delete Icon
+        </Typography>
+
+        <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+          <Chip
+            label="Custom delete icon"
+            onClick={handleClick}
+            onDelete={handleDelete}
+            deleteIcon={<DoneIcon />}
+          />
+          <Chip
+            label="Custom delete icon"
+            onClick={handleClick}
+            onDelete={handleDelete}
+            deleteIcon={<DeleteIcon />}
+            variant="outlined"
+          />
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Chip/Deletable.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function Deletable() {
+
+  const handleDelete = () => {
+    console.info('You clicked the delete icon.');
+  };
+
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Deletable
+        </Typography>
+
+        <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+          <Chip label="Deletable" onDelete={handleDelete} />
+          <Chip label="Deletable" variant="outlined" onDelete={handleDelete} />
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Chip/IconChip.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import FaceIcon from '@mui/icons-material/Face';
+
+export default function IconChip() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Icon Chip
+        </Typography>
+
+        <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+          <Chip icon={<FaceIcon />} label="With Icon" />
+          <Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />
+        </Stack>
+      </Card>
+    </>
+  );
+}

components/UIElements/Chip/SizesChip.js

@@ -0,0 +1,36 @@
+import React from "react";
+import Card from "@mui/material/Card";
+import { Typography } from "@mui/material";
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+export default function SizesChip() {
+  return (
+    <>
+      <Card
+        sx={{
+          boxShadow: "none",
+          borderRadius: "10px",
+          p: "25px",
+          mb: "15px",
+        }}
+      >
+        <Typography
+          as="h3"
+          sx={{
+            fontSize: 18,
+            fontWeight: 500,
+            mb: '10px'
+          }}
+        >
+          Sizes Chip
+        </Typography>
+
+        <Stack direction="row" spacing={1} className="chip-gap-for-rtl">
+          <Chip label="Small" size="small" />
+          <Chip label="Small" size="small" variant="outlined" />
+        </Stack>
+      </Card>
+    </>
+  );
+}