Add more examples

mui · Apr 15, 2022 · 4214ec5 · 4214ec5
1 parent 7f835f8
commit 4214ec5
Showing 1 changed file with 30 additions and 0 deletions.
diff --git 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]) => (