From 63b241ea3de40dba88a54bf341b9a557f2cdda0a Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Thu, 14 Apr 2022 23:18:20 +0100
Subject: [PATCH] Add more examples

---
 docs/pages/experiments/joy/chip.tsx | 30 +++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/docs/pages/experiments/joy/chip.tsx b/docs/pages/experiments/joy/chip.tsx
index 0d816e0e3c1f6d..79a6b3ebf71834 100644
--- a/docs/pages/experiments/joy/chip.tsx
+++ b/docs/pages/experiments/joy/chip.tsx
@@ -1,10 +1,13 @@
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import CheckIcon from '@mui/icons-material/Check';
 import Moon from '@mui/icons-material/DarkMode';
 import Sun from '@mui/icons-material/LightMode';
 import ThumbUp from '@mui/icons-material/ThumbUp';
+import Avatar from '@mui/joy/Avatar';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Chip from '@mui/joy/Chip';
+import ChipDelete from '@mui/joy/ChipDelete';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 import Typography from '@mui/joy/Typography';
 import * as React from 'react';
@@ -51,6 +54,33 @@ export default function JoyChip() {
         <Box sx={{ px: 3 }}>
           <ColorSchemePicker />
         </Box>
+        {/* Examples */}
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 5, mt: 5 }}>
+          {['Benny', 'Jun', 'Danilo', 'Marija', 'Michal', 'Olivier'].map((name) => (
+            <Chip variant="light" endDecorator={<ChipDelete />}>
+              {name}
+            </Chip>
+          ))}
+        </Box>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 5, mt: 5 }}>
+          {['Benny', 'Jun', 'Danilo', 'Marija', 'Michal', 'Olivier'].map((name, index) => (
+            <Chip
+              sx={{
+                paddingLeft: 0,
+                justifyContent: 'flex-start',
+                borderRadius: 20,
+                width: '11%',
+                height: 40,
+              }}
+              variant="contained"
+              color="success"
+              startDecorator={<Avatar size="sm" src={`/static/images/avatar/${index + 1}.jpg`} />}
+              endDecorator={<CheckIcon />}
+            >
+              {name}
+            </Chip>
+          ))}
+        </Box>
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
           {/* Without decorators */}
           {Object.entries(props).map(([propName, propValue]) => (