From 635c4779a287a61ff40b61b18904706045843b58 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Nov 2020 23:05:48 +0300
Subject: [PATCH] Demo for the new Avatar Component

---
 src/views/avatar/AvatarDemo.vue | 44 ++++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/views/avatar/AvatarDemo.vue b/src/views/avatar/AvatarDemo.vue
index 711daa70f..5fb6cca0d 100644
--- a/src/views/avatar/AvatarDemo.vue
+++ b/src/views/avatar/AvatarDemo.vue
@@ -9,7 +9,7 @@
 
         <div class="content-section implementation">
             <div class="p-grid">
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <div class="card">
                         <h5>Letter</h5>
                         <Avatar letter="P" class="p-mr-2" size="xlarge" />
@@ -18,7 +18,7 @@
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <div class="card">
                         <h5>Letter - Circle</h5>
                         <Avatar letter="P" class="p-mr-2" size="xlarge" shape="circle" />
@@ -26,10 +26,19 @@
                         <Avatar letter="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
                     </div>
                 </div>
+
+                <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Letter - Badge</h5>
+                        <Badge value="4">
+                            <Avatar letter="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" />
+                        </Badge>
+                    </div>
+                </div>
             </div>
            
             <div class="p-grid">
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <div class="card">
                         <h5>Icon</h5>
                         <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
@@ -38,7 +47,7 @@
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <div class="card">
                         <h5>Icon - Circle</h5>
                         <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
@@ -46,10 +55,19 @@
                         <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
                     </div>
                 </div>
+
+                 <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Icon - Badge</h5>
+                        <Badge value="4" severity="success">
+                            <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
+                        </Badge>
+                    </div>
+                </div>
             </div>
 
             <div class="p-grid">
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <div class="card">
                         <h5>Image</h5>
                         <Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" />
@@ -58,21 +76,29 @@
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-6">
+                <div class="p-col-12 p-md-4">
                     <div class="card">
-                        <h5>Group</h5>
+                        <h5>Avatar Group</h5>
                         <AvatarGroup class="p-mb-3">
                             <Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/>
                             <Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/>
                             <Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/>
                             <Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/>
                             <Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/>
-                            <Avatar letter="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff; font-size: 1rem" />
+                            <Avatar letter="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
                         </AvatarGroup>
                     </div>
                 </div>
+
+                 <div class="p-col-12 p-md-4">
+                    <div class="card">
+                        <h5>Image - Badge</h5>
+                        <Badge value="4" severity="danger">
+                            <Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" />
+                        </Badge>
+                    </div>
+                </div>
             </div>
-            
         </div>
 
         <AvatarDoc />