Add avatar list

client/constants/Pattern.ts

@@ -1,4 +1,5 @@
 enum Pattern {
+    AvatarList = 'Avatar list',
     Badge = 'Badge',
     Breadcrumb = 'Breadcrumb',
     ButtonWithIcon = 'Button with icon',

client/pages/ExplorePage.tsx

@@ -83,6 +83,7 @@ const ExplorePage = () => {
                     <Heading title="Patterns" />
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                        <CoverCard pattern={Pattern.AvatarList} />
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.ButtonWithIcon} />

client/patterns/avatar-list/Cover.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                {
+                    Array(3).fill(null).map((_, i) => {
+                        return (
+                            <div key={i} style={{ marginLeft: '-4px' }}>
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        backgroundColor: '#BBB',
+                                        borderRadius: '9999px',
+                                        boxShadow: '0 0 0 2px #FFF',
+                                        color: '#FFF',
+                                        display: 'flex',
+                                        fontSize: '12px',
+                                        height: '24px',
+                                        justifyContent: 'center',
+                                        width: '24px',
+                                    }}
+                                >
+                                    {i + 1}
+                                </div>
+                            </div>
+                        );
+                    })
+                }
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/avatar-list/Details.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Avatar: React.FC<{}> = ({ children }) => {
+    return (
+        <div
+            style={{
+                alignItems: 'center',
+                backgroundColor: '#BBB',
+                borderRadius: '9999px',
+                boxShadow: '0 0 0 4px #FFF',
+                color: '#FFF',
+                display: 'flex',
+                height: '48px',
+                justifyContent: 'center',
+                width: '48px',
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Avatar list">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                            <div style={{ marginLeft: '-4px' }}><Avatar /></div>
+                            <div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    display: flex;
+">
+    <!-- Avatar item -->
+    <div style="
+        /* Nagative margin make avatar overlap to previous one */
+        margin-left: -4px;
+    ">
+        <div style="
+            /* Add a white curve between avatars */
+            box-shadow: 0 0 0 4px #FFF;
+
+            /* Content is centered */
+            align-items: center;
+            display: flex;
+            justify-content: center;
+
+            /* Rounded border */
+            border-radius: 9999px;
+        ">
+            <!-- Image -->
+            ...
+        </div>
+    </div>
+
+    <!-- Repeat other avatars -->
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

public/sitemap.xml

@@ -5,6 +5,7 @@
     <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
+    <url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
     <url><loc>https://csslayout.io/patterns/badge</loc></url>
     <url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
     <url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>