1 files changed, 53 insertions, 0 deletions

diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
new file mode 100644
index 0000000..01aaf93
--- /dev/null
+++ b/tpl/views/avatar.pug
@@ -0,0 +1,53 @@
+mixin view-avatar 
+    +view('avatar', 'Avatar')
+        .c-box
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar
+                    = 'Vo'
+                +avatar(status='green' hue=45)
+                    = 'lp'
+                +avatar(src='avatar.png')
+                +avatar(src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='75' hue=90)
+                    = 'eo'
+                +avatar(size='75' status='green' hue=135)
+                    = 'n'
+                +avatar(size='75' src='avatar.png')
+                +avatar(size='75' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(size='50' hue=180)
+                    = 'V'
+                +avatar(size='50' hue=225)
+                    = 'o'
+                +avatar(size='50' src='avatar.png')
+
+        .c-box
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true)
+                    = 'Vo'
+                +avatar(circle=true status='green' hue=45)
+                    = 'lp'
+                +avatar(circle=true src='avatar.png')
+                +avatar(circle=true src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='75' hue=90)
+                    = 'eo'
+                +avatar(circle=true size='75' status='green' hue=135)
+                    = 'n'
+                +avatar(circle=true size='75' src='avatar.png')
+                +avatar(circle=true size='75' src='avatar.png' status='red')
+            br
+            br
+            div(style={ display: 'flex', gap: '.3em' })
+                +avatar(circle=true size='50' hue=180)
+                    = 'V'
+                +avatar(circle=true size='50' hue=225)
+                    = 'o'
+                +avatar(circle=true size='50' src='avatar.png')