Merge pull request #77 from phuoc-ng/avatar

Add avatar

client/constants/Pattern.ts

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

client/pages/ExplorePage.tsx

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

client/pages/HomePage.tsx

@@ -170,7 +170,7 @@ const HomePage = () => {
                                 marginBottom: '16px',
                             }}
                         >
-                            50+ patterns
+                            60+ patterns
                         </div>
                         <Link
                             to="/patterns"

client/patterns/avatar-list/Details.tsx

@@ -80,7 +80,9 @@ const Details: React.FC<{}> = () => {
                 />
             </div>
 
-            <RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
+            <RelatedPatterns
+                patterns={[Pattern.Avatar, Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]}
+            />
         </DetailsLayout>
     );
 };

client/patterns/avatar/Cover.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        height: '48px',
+                        padding: '4px',
+                        width: '48px',
+                    }}
+                >
+                    <svg
+                        viewBox="0 0 24 24"
+                        style={{
+                            fill: "none",
+                            height: '100%',
+                            stroke: "#FFF",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 1,
+                            width: '100%',
+                        }}
+                    >
+                        <path
+                            d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
+                            M5,20.5
+                            c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
+                        />
+                    </svg>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/avatar/Details.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Avatar">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '9999px',
+                                    height: '64px',
+                                    padding: '8px',
+                                    width: '64px',
+                                }}
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    style={{
+                                        fill: "none",
+                                        height: '100%',
+                                        stroke: "#FFF",
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 1,
+                                        width: '100%',
+                                    }}
+                                >
+                                    <path
+                                        d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
+                                        M5,20.5
+                                        c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
+                                    />
+                                </svg>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Rounded border */
+    border-radius: 50%;
+    height: 64px;
+    width: 64px;
+">
+    <!-- Avatar image -->
+    <img
+        src="..."
+        style="
+            /* Rounded border */
+            border-radius: 50%;
+
+            /* Take full size */
+            height: 100%;
+            width: 100%;
+        "
+    />
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/initial-avatar/Details.tsx

@@ -86,7 +86,13 @@ const Details: React.FC<{}> = () => {
             </div>
 
             <RelatedPatterns
-                patterns={[Pattern.AvatarList, Pattern.Badge, Pattern.Centering, Pattern.PresenceIndicator]}
+                patterns={[
+                    Pattern.Avatar,
+                    Pattern.AvatarList,
+                    Pattern.Badge,
+                    Pattern.Centering,
+                    Pattern.PresenceIndicator,
+                ]}
             />
         </DetailsLayout>
     );

client/patterns/presence-indicator/Details.tsx

@@ -72,7 +72,10 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]} />
+
+            <RelatedPatterns
+                patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
+            />
         </DetailsLayout>
     );
 };

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</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>